The mobile revolution has changed user expectations of how they interact with different products. Meeting these changed expectations requires a huge amount of re-thinking from user experience (UX) designers. Pascal Mangold, CEO of Magnolia, recently explored this trend in an article on how the mobile revolution is challenging open source product interfaces and explained how Magnolia CMS, an open-source enterprise-grade Java Content Management System, redesigned its web-based interface to give its users an innovative new "driven by touch" content management experience.
I am the lead UX designer at Magnolia and my mantra is making software a joy to use. Here are five tips for success when building mobile interfaces for the web.
- Focus on the essentials due to limited screen real estate and resources. Simply put, smaller screens mean less space. Designing a user interface for a mobile device forces a UX designer and the stakeholders to think about what a user will need most when using a mobile device and pare the interface down to these essential elements.
- Break monolithic workflows down into tasks. Make sure that your UI is structured in a way that makes working on specific, single tasks easy. One way (and of course, there are others) to do this is with apps. Apps are popular because they allow the user to focus on specific jobs at hand.
- Make personalization of the user interface easy. Making an interface personal is essential when delivering content to mobile devices. Users carry these devices with them all the time, making them personal objects. The user interface should reflect this by being adaptable and customizable to both a corporation’s and a user’s needs.
- Don’t recreate the interface of a native app in the browser. This is doomed to fail. It's okay for web applications to deviate from the look and feel of native apps. But, remember that just as users have new expectations due to the mobile revolution, they have certain expectations from web applications too—support for browser bookmarking of important states or screens, history support, and support for browser back and forward buttons.
- Don't be afraid to be selective when supporting devices. Support popular devices and leave out others at first. In many cases, going deep on the UX for just a small set of devices is more beneficial than delivering an average UX that works on all devices. The reason for this is that all mobile devices are not equal—designing for a smartphone is very different from designing for a tablet. Every device class requires its own, tailored interface such as, for example, different navigation.
Want to see these tips in action? Take a look at some screenshots of the new Magnolia 5.0 UI, or delve into Magnolia’s UX Wiki, where Andreas Weder reveals exciting UX aspects such as Magnolia 5’s style guide.