For the past five weeks we have been looking at all the different elements that are part of a successful and effective User Interface. This week it was time to look at how we could take these separate elements and combine them into a useable and effective single entity. We looked at some key theorical laws such as: Jakob’s Law, Fitts’s Law, Law of Pragnanz, Hick’s Law and the Von Restorff Effect all related to how humans interact with User Interfaces and how by taking these known laws into account we can create the most effective user interfaces.
We also looked at some of the extra features we can add to our User Interfaces to improve the and make them that bit more pleasant to use. Features like: transitions, micro-interactions, depth, discoverability, directed manipulation, feedback, animations and user control. All of these elements might alone appear small or insignificant but put together they can transform a user interface from something that does a job and is OK, to something that is a pleasure and joy to use. We recapped on colour theory and basic good practice around minimum sizes, not overcrowding the screen, alignment, contrast, hierarchy and negative space. All elements we will need to think about as we build our music app prototype’s for next week’s critique.
This week’s lecture was taking all we had covered and learned over the past five weeks and putting it all together to form a cohesive whole. Firstly we covered the basics of any good user interface design, consistency, using size for hierarchy and subtle indicators of what is going on. All of these elements help users navigate the user journey through a product as easily as possible and without hitting any blocks along the way. We also discussed the importance of alignment, and how when elements are aligned correctly it makes a huge difference to the look and feel of an application. Poor alignment looks messy and hard to use, good alignment looks professional and is a more enjoyable experience to use. We can see this in all successful apps, it may not be obvious but the alignment is always correct.
Source (https://play.google.com/store/apps/details?id=com.spotify.music&gl=GB) Last Accessed 14/03/23
Above you can see a screen from the Spotify app, all the thumbnail images, and text are neatly aligned with one and other, as well as the three dots on the right for more options all perfectly aligned. While this may not be at the fore front of our minds, while using the app day to day, we would definitely notice if the alignment was out.
We also looked at other key factors in making a user interface enjoyable and pleasurable to use. Key points like discoverability, where we can give users a glimpse that there are more features to find if they swipe a certain way or tap a button.
Source (https://play.google.com/store/apps/details?id=com.spotify.music&gl=GB) Last Accessed 14/03/23
Again this screen from the Spotify app shows this in action, while we can see the covers of two audio books very clearly, on the right hand side we can just see a sliver of another book cover showing us that if we swipe right we can browse more books. Its very simple and subtle but without it its likely we wouldn’t realise there were more options to swipe across to.
Another key point to consider is feedback, where we give user visual or audio cues of what tapping that button has done, this can include things like adding a number beside the basket icon on an e-commerce app to show an item has been added to the basket. You could even add a little animation at this stage to make the item look like it has flown up into the basket, again a subtle hint that the action the user has just taken has had an effect.
Source (https://play.google.com/store/apps/details?id=com.amazon.mShop.android.shopping&gl=GB) Last Accessed 14/03/23