CSS Animations

So for some proof of concepts I recently created some animations using css. What would have in the past required javascript can now be done with css in many cases. Mozilla has a great overview and details on using css animations

In one animation I wanted an svg to rotate in the background and in another I wanted an element to slowly glow on and off. In both cases it helped to have a tool to do the basic animation. I have been using Figma for the last year and there are some plugins that will generate css animation code. Figmotion seems to be the most popular, but I liked Motion a bit better as it made it easier to select items in the hierarchy of your frame in its left side panel.

Unfortunately, Figma itself does not support viewing animations in the editor although you can save them in the GIF format that can then be played in the prototype player. Using Motion you can export it as an animated gif and then drag that file back into your Figma file. If you are using the animation else where as I was there are several other export options including CSS, which is what I needed.

I then took that css and played around with it more in codepen.io. You can find lots of other folks css animation experiments there as well.

Upgrade to Big Sur

So I upgraded to Apple’s Mac OS Big Sur. I have to start out by saying that I feel Apple has been slipping in recent years with basic usability. The whole flat UI thing sucks not just in my opinion, but also in usability testing I have done with designs that were “flat”. Also I am not sure who started it, but between Apple, Google, and Microsoft all hiding scroll bars, it’s really a annoying trying to notice when there may be more on the screen. The first thing I look for now when updating OS is the option to force scroll bars to be visible.

Having said all that, I have to say that I generally like the look and feel of Big Sur and also liking some of the new features. The finder windows do feel cleaner and more refined. The new control center is interesting, but I have yet to really use it. There are new privacy and security measures which is good to know that they are improved. Overall though it seems just OK. I am not wowed by anything just yet, but also there have been no major glitches as well. I do really appreciate that Mac OS upgrades are free now. If there is anything else that pops out over the next week, I’ll be sure to make note here.

Wrote some code

It has been a while since I last wrote some code. Not that long, maybe a month or two, but long enough that it felt refreshing. I’ve been writing a lot of reports, and emails of course, and creating a lot of mock-ups in Figma that I have not had time to code. Unlike Axure, Figma does not allow one to add code to a prototype. This is something, I wish I really could do though. It would be great to add both CSS and enhance/customize interactions with Javascript.

Future is coming faster than we think

It’s been said before, the future is coming faster than we think. This is true now more than ever as the advent of “AI” and robotics automation is beginning to seriously take hold. I put AI in quotes because it is still far from true artificial intelligence. It is because of significant increases in computing power and networking that increasingly complex algorithms can be run. Which gives the appearance of “intelligence”, but the reality is this is not true intelligence yet. While a machine can learn, it still has to be cultivated and corrected and ultimately it is not really thinking.

Anyone who has engaged at length with Google Home, Amazon’s Alexa, or Apple’s Siri knows that there are plenty of limitations. As great as they are for somethings you very quickly run into problems for anything that is not yet factored in their algorithms and resources they pull information from. Having said that, they and other AI driven technologies are gaining traction in business. I know that there are many others predicting the same thing I am here…

Continue reading

Posted in design, technology | Comments Off on Future is coming faster than we think

More Axure Fun

So I have been using repeaters in a couple of prototypes in Axure. Repeaters allow creating a single element that then is linked to a data table and will repeat content based on how many rows are in the data table. This can make it much easier to automatically simulate a list/grid of search results with real content. You can also then add controls to filter and sort and paginate the list. There is also the ability to dynamically load images from an external source. All of this awesome functionality was making it fun to build out some prototypes that I had intended to do some remote/unmoderated usability testing.

Unfortunately, complex repeaters (6+ columns, external images, links/refernce pages, etc) with more than around 12 rows can substantially slow down the loading of a prototype in a browser. It gets even worse from the axshare server. Also, having more than 1 repeater widget on a page can also slow down a prototype to make it basically unusable. So I fell back to using dynamic panels with states to represent more limited simulation of filtering.

There are some ways to optimize repeaters including using the pagination functionality to load a smaller set of content. However, even after this optimization I still found my prototype pages with repeaters taking upwards of 8-10 seconds to load locally. Viewing pages from the axshare server which can be slow on its own, was often pushing 20+ seconds to load a page. For all the power they offer it was a big dissappointment to not be able to use repeaters in the prototypes for the usability testing. I am still looking further in to how to optimize things. I think it would be helpful if we could make a repeater load asynchronously and perhaps have a place holder image or group of elements.

Axure Interactions on Grouped Elements Reminder

This is a note to remind myself that interactions applied to a group folder do not work if any of the enclosed elements have an interaction. Also AxureEx is an incredibly useful set of methods for including javascript in an Axure file:

AxureEx can be found here:
http://www.dejongh.dk/wiki/doku.php?id=interaction:axure.ex_api

And the downloadable file is here:
https://github.com/Sam-Hepworth/Axure.Ex/releases

Credit to Sam Hepworth

Microdata and html5

Spending some of my time off exploring microdata and html5 more in depth. If the semantic web is going to finally gain wide adoption microdata is going to be the catalyst. Unfortunately as easy as it is, it still involves a some effort to add microdata to your code. Still it is a million times easier than XML or other semantic formats.

Unfortunately, I think performance will still be an issue in actual implementations. Microdata is still fairly verbose and also referencing the scope/schema from a third party server may be a problem for some high traffic servers. Adding microdata to your mark-up can easily double or triple the size and there is always the latency issue of referencing a third party server.

These were the sources I was reviewing;
html5
http://www.w3.org/TR/html5/
http://diveintohtml5.org/
http://html5demos.com/

microdata
http://www.w3.org/TR/microdata/
http://www.google.com/support/webmasters/bin/answer.py?answer=176035
http://html5doctor.com/microdata/