[Reading Notes] Mobile First
Design for Mobile First
Note that this book is about mobile web, not native apps.
The key point of this book, is to design for mobile first. Because mobile has more constraints and limitations, a design that works for mobile could generally still work for desktop, but not the other way around. Design for mobile is clear and easy to understand, but it’s hard to do. Why? People are still used to desktop websites design and habits are the hardest thing to change.
Interaction Type
Luke’s analysis of mobile user behaviors is very inspiring. There are typically four interaction types.
Lookup/Find (urgent info, local): I need an answer to something now — frequently related to my current location in the world.
Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.
Note that every single user could have different interaction types (or a combination of several) in different scenarios.
Touch Gesture
A lot to choose from, but a few are used frequently.
Watch Out for Hover
Remember, hover is not supported on mobile.
So what should we do? Generally, four solutions: show on screen, show on tap or swipe, show on a separate screen, or just let it go. When you make the decision, think about the purpose of having the hover on desktop at the first place. What’s it for? What’s the interaction you expect to have here? Keeping all that information in mind. Sometimes, you might even realize the hover is totally not necessary, even on the desktop.
Mobile is the Motivation to Rethink
Really think about why each elements are there on mobile.
Users are much easier to be distracted when using their phone (or tablet), to be confused by navigation, to be depressed by design. So really think through your design. It’s also a great chance to rethink the design decisions you made for desktop web pages. Correct them, if needed. Delete unnecessary parts, if needed. After all, as Luke said in the book:
Reduction is the best layout approach available to you on mobile.
— — — — —
I have also published several other reading journals:
