Author: Luke Wroblewski Luke Wroblewski But these opportunities are also design constraints: Mobile screens are small, driven by touch, and often connected to spotty networks. Which is why companies like Facebook, Google, PayPal, and countless startups taking the plunge into mobile-first design quickly realize that designing for mobile is not the same as designing for the desktop PC. Our PC-driven instincts are often very wrong for mobile.
|Published (Last):||12 March 2009|
|PDF File Size:||20.23 Mb|
|ePub File Size:||10.88 Mb|
|Price:||Free* [*Free Regsitration Required]|
Align with how people use their mobile devices and why. Emphasize content over navigation. Provide relevant options for exploration and pivoting. Maintain clarity and focus. Align with mobile behaviors In the previous part, we talked about the constraints and capabilities that make designing for mobile unique. Similarly, the desktop web also has a set of limitations and possibilities that make it distinct.
Instead, you need to think about what mobile is uniquely good at and align it with the needs of your customers. Looking at this intersection at a high level can illuminate how people are typically using their mobile devices and why.
For example, the Flickr photo sharing mobile web experience has four primary actions. Fig 4. Similarly, the Basecamp project management mobile web experience emphasizes the ability to check-in, edit, and create new messages, to-dos, and more.
Aligning with mobile behaviors also naturally aligns your website with real-world needs. Since a mobile experience can be accessed anywhere and everywhere, you need to think through how it can be useful to people wherever they may be. I recently found a great example of this in action. Content over navigation section2 As a general rule, content takes precedence over navigation on mobile.
Whether people are checking on frequently updated data like stocks, news, or scores; looking up local information; or finding their way to articles through search or communication tools—they want immediate answers to their needs and not your site map. Too many mobile web experiences like the Flickr and Basecamp examples we just looked at start the conversation off with a list of navigation options instead of content. Time is often precious on mobile and downloads can cost money, so get people to what they came for as soon as you can.
A simple header tells you whose site you are on and relegates navigation options to a single action. Pivot and explore section3 But wait—if content always takes precedence over navigation, how can I find my way around mobile web experiences?
Facebook recently redesigned their mobile web experience and actually reduced the number of navigation options Fig 4. YouTube provides a shortcut to a full screen experience dedicated to getting around the site Fig 4.
This approach requires you to actively seek out navigation options and takes you out of context to a separate page when you do. This approach allows you to stay on the current page when considering where to go next.
No need to move to and load a separate page. ESPN also repeats their navigation options in a menu at the bottom of most pages. Controls at the bottom of the screen are easier to interact with one-handed and present people with choices and ideas on what to do next when they get to the end of a screen.
Sign out? Send feedback? Instead, a top-level menu button can simply link people to a navigation list on the bottom of a mobile webpage after the content. We recently used this approach on the Bagcheck mobile web experience Fig 4. Having this list present at the bottom of content pages allows people to pivot and explore other parts of the site.
Especially when they come directly to a content page and may not be familiar with the rest of what the site offers. Content pages on Bagcheck also have unique related navigation lists for deeper exploration Fig 4. These navigation options allow people to immerse themselves in further information about a single topic if they choose. Or they can simply use the global navigation options below to pivot to a different area of the site.
Contextual navigation options are also useful for tasks. In the Gmail mobile web experience Fig 4. Instead, they are always present at the top and thereby instantly accessible. Many devices Android, Blackberry, Windows Phone 7, etc. The two browser menus and two fixed position menus in Yahoo! Devices with physical controls below their screen also present a challenge for menus fixed to the bottom of the screen Fig 4. So while navigation menus fixed to the bottom of the screen might be a good idea in some native mobile applications, the variable presence of web browser menus and physical controls below the screen on mobile devices means they are often a poor idea in mobile web experiences.
If you need a fixed menu, better to fix it to the top, as Twitter has done in their redesigned mobile mobile web experience Fig 4. Instead, they are in the real world with many possible distractions around them. The rest of the interface is laser-focused on the task at hand. The task at hand is seeing play-by-play action not jumping between menu options. Minimizing the amount of navigation options on mobile screens helps to prevent errors as well.
With fewer navigation choices, people are less likely to accidentally tap away to other tasks while trying to accomplish their current objective. Focusing on content first, navigation second gets people to the information and tasks they want quickly. Relevant and well-placed navigation options allow people to dive deeper or pivot to explore other parts of your site. Reducing the amount of navigation choices and chrome on key tasks maintains clarity and focus on what people need to accomplish—helpful when they are hurried or in less than ideal situations.
And when they do have some relaxing time on the couch with their mobile, people will still appreciate the simplicity of your design! Recently by Luke Wroblewski Vexing Viewports Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal.
This agreement has never been more important. Design Like a Teacher A difficult user migration project led Aimee Gonzalez-Cameron to reevaluate how she approaches her work. She started to see herself not just as an expert on user experience, but as a teacher, a realization that transformed her work. She reflects on how developing a teaching mindset can improve any UX project. The King vs. Marvel and learn as he uses a concept from chess to build a toolkit of UI design strategies covering color, typography, lighting and shadows, and more.
More from this author.
An Insider's View of Mobile-First Design: Don't Make These Mistakes
Conceived and popularised by product designer, entrepreneur, author and speaker Luke Wroblewski , in the last few years this approach has radically changed the way that professionals approach website design. The core idea is elegantly simple. When you compare that to, say, how many babies are born per day about , you appreciate that this is a real game changer. The network activity can go out at any time. Mobile first forces you to get down to the bare essence of what makes your content work.