I attended the UX Scotland Conference 2016 with a view to discovering the latest trends and thinking in the constant evolution of design interfaces.
The best aspect of the conference was the overall theme of practical and applicable solutions to improve our user experience. Indeed, most of the sessions during the second day provided not only a lot of food for thought and inspiration but also some immediately actionable tips.
Vitaly Friedman (Smashing Magazine) began his talk by challenging the belief that design patterns offer a lazy solution. There are many situations where using design patterns is appropriate and productive. After all, interfaces should be obvious, easy to use and accessible. He then went on to describe the latest research into how people use mobile interfaces. Over 75% of interactions these days are driven by the thumb – which can’t easily interact with the (usually top-left just out of reach) hamburger icon!
Buttons and menus
Bottom-aligned controls are easier to reach these days – on iOS this is now an app pattern, less so in Android because of the ‘soft buttons’ on the device body which you want to avoid. Since Spotify moved their navigation from top to bottom their menu usage has increased by 30 percent – here’s some other examples of websites with mobile navigation in the page footer:
Conventional carousels were another design idea that received a shake-up. Evidence strongly suggests that people don’t use them, and Erik Runyon’s blog has some telling statistics on their use. The word is don’t use them… unless they’re used in a new and inventive way that encourages people to click through by providing more information and context in the carousel frames.The Should I Use A Carousel site features a quick guide to common carousel pitfalls.
There is more to responsive images than simply device-dependent resizing. For example, websites can serve a different image depending on the country and cultural context – the Emirates mobile site shows different images and text depending on the users location or cultural preferences.
Maps and Maths
Maps can take up a lot of screen real-estate – for example the map on the Travois website is replaced by a dropdown menu on smaller devices. . If you can’t show a full map, then an alternative is to show a representation of it, as in the Guardian’s US election coverage pages.
Nice examples of seating plans that work on mobiles are the Seatgeek website and the experimental cinema booking app. Mathematical equations and visual representations of data, such as musical notation, also need to be responsive – the Soundslice site is a slick demonstration of responsive musical ‘engraving’ (note to the rest of us).
- Travois http://travois.com/project/
- Guardian US election map http://www.theguardian.com/us-news/ng-interactive/2016/jun/07/live-primary-results-new-jersey-california.
- Seatgeek seatgeek.com
- Soundslice – Auld Lang Syne https://www.soundslice.com/scores/auld-lang-syne/
The next big thing would appear to be content blocks. Some good examples are the Support Sapporo site and the FIFA museum. This method lets the user focus on the key information, while adapting across devices. I would argue that this idea is completely new – these remind me of some “vintage” image maps…
Key points from Vitaly Friedman at UX Scotland Conference 2016
The key points, immediately implementable, according to Friedman were:
- Never hide important actions
- Define priority items
- Thumbs drive interactions
- Consider ‘curtain’ navigation
- Tabs at bottom as filters
- Combine filters and navigation
- Adjust view and fidelity if necessary
- Consider tagging/filters instead of sections
- Accordions work well
- Think about your responsive content – images, maps, tables, equations – everything
- Know the latest user research and make informed decisions
- Break the rules if you have a good reason to do so
Finally (and not so easy to achieve)