presentation

Bp

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

So today we will be discussing navigation design for mobile friendly sites. First off, I am not actually an expert in UI/UX as I kind of graduated just before UX design was a thing. When I graduated, Flash was still a legitimate platform for an entire website so that dates me a little. Strange thing is, most of my friends out of industrial and product design became UX/UI designers. I have designed quite a few websites in my time though as well as some apps but I have often worked with other professionals, such as potentially you, to bring solutions to life.

Also, since this is a beginner fundamental course, I just want to go over more basic principles and thought processes that are involved in designing for web and mobile for web. To be honest, even today, a lot don’t pay as much attention to it as they should and beautiful mobile experiences are still much more rare than beautiful desktop websites. Hopefully you will all change that.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

The mobile experience is a very technical and challenging environment. This has a lot to do with separate OSs and variable technology, speed and data concerns, knowledge gaps, dynamic environments and limited space (visual and tactile). In the future, as things become more standardized, powerful or unified, think chargers and USB connectors, design with mobile will become more seamless. Because of the challenges of the environment, we often think mobile first as other environments are generally more easy.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp3

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

The three basic principles I would like to cover when designing for mobile are:
1. Content: Understand, Question, Curate and Evaluating the Content
2. Research existing UI Patterns and approaches.
3. Understanding legibility, typography and human qualities.

These three principles are all interrelated and happen holistically, cyclically.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp4

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

There are also three basic qualitiies that the design should take: minimal, coherent and consistent. This is to satisfy the need for quick, easy and intuitive browsing.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

Also, one last thing is the principle of appropriateness which should belie absolutely every design decision.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

1. Content: Understand the Content
First off, before even putting pen to paper, look and understand the content. What makes sense for the content and its needs. Use actual content!

Now go through a process of organizing and curating it. What needs to be up front (obvious), what needs to be accessed (easy), and what would be most appropriate to the content/context/audience (what is possible).

[/column][column type=”one-fifth” last=”true”] [/column]

Bp

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

Remember that content needs on mobile are sometimes different than that on a desktop browser. Ie. mobile needs are usually locally focused, such as address and hours. Many people use mobile to browse products but a desktop to buy.

Also, in terms of design considerations, What form should the content take in terms of typography or structure? I.e if it is a story book/timeline website maybe it should use a scrolling. If it is a visual blog or products listing, perhaps a tile format would work well. Navigation also can tell a story.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

What is out there already (lots!) Do research and see what approaches would work well for the content and context. These patterns are helpful in that they are established ways of knowing how to navigate a site thereby being a much quicker way to understand the landscape. It’s like bus maps everywhere are generally the same so that navigating a city is easier. The double edged sword is that sometimes, the UX pattern solutions might create a generic look, which isn’t necessarily a bad thing.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

Remember too that there are many levels of digital savviness. If you are designing for, say, older people who may be less tech savvy, read my mom, you probably want to keep things very obvious and simple, and refrain from more interesting approaches. What UI pattern works for what audience?

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

It is a balance between what people know and what will attract and keep their attention. Remember again it is about what is appropriate rather than what is possible. The hamburger menu may have its detractors but it is a viable solution that people understand.

Hopefully, you all will be out there creating and establishing new patterns and approaches that become ubiquitous!

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

3. Human concerns such as legibility and touch
Because of the downsized environment of mobile we really need to pay attention to the small details and focus on the most important.
Consider for navigation is the hand. Most people are accessing these sites on their phone so what is the appropriate size for tapping, and interactive elements (most say around 48 px). Also what can you do for feedback to provide confirmation of an action? What can be done with one hand and takes advantage of the thumb and hand positions? Also, don’t use hover elements!

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

Fundamentally, design and graphic design concerns words, the written language. Typography is language made visible (though I would say written language is language made visible, and typography is language made visually appropriate). This is probably my own bias, but I think typography is really important.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

Finally a hidden fourth principle! Test and Iterate! It never works as you think so you need to test it and refine it.

[/column][column type=”one-fifth” last=”true”] [/column]

Bp2

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]

So for discussion and questions? What do you think works best and what are some personal examples and situations to consider for mobile friendly sites? Also did I miss anything?

[/column][column type=”one-fifth” last=”true”] [/column]

[column type=”one-fifth”]spacer [/column][column type=”three-fifths”]


Resources

Basic reads:

https://econsultancy.com/blog/64823-the-five-golden-rules-of-responsive-web-design/
https://www.uxpin.com/studio/blog/5-creative-mobile-ui-patterns-navigation/
https://www.awwwards.com/mastering-ui-patterns-for-smarter-design.html
https://www.awwwards.com/cut-it-and-other-tips-for-ux-design.html
http://erickar.be/blog/my-experience-with-navigation-in-responsive-design

skim through posts:
https://www.smashingmagazine.com/tag/design-patterns/

Really good read on design patterns critically
https://www.smashingmagazine.com/2016/05/smart-responsive-design-patterns-or-when-off-canvas-isnt-good-enough/

Good reads on web typography
https://robinrendle.com/essays/new-web-typography/
http://mikeyanderson.com/optimal_characters_per_line
http://typecast.com/blog/a-more-modern-scale-for-web-typography

Good read on human centred design around a vast bank of information
https://www.smashingmagazine.com/2015/08/from-russia-with-love-behind-the-scenes-of-the-kremlin-ru-responsive-redesign/

Samples of responsive websites:

https://www.admiretheweb.com/articles/20-responsive-mobile-navigation-inspiration/
http://www.mobile-patterns.com/
http://webbyawards.com/winners/2015/mobile-sites-apps/features-categories/best-practices/
https://www.mobify.com/insights/70-stunning-responsive-websites-for-your-inspiration/

[/column][column type=”one-fifth” last=”true”] [/column]

PDF Presentation