Sitemaps and Navigation

Hierarchical Tree

A common type of layout for applications with lots of content. Users choose a “bucket” from the navigation selected then drill down to more specific information. The downside is that it forces users to make choices from large amount of links.

01-hierarchical-tree-opt-500.jpg

Nested Doll

This type of structure is ideal for small screens and often used with a swipe left or right interaction. Can also be helpful for adding some interactivity to a form application.

02-nested-doll-opt-500.png

Hub and Spoke

Utilizes a central “launch screen” in which the user has to navigate back to in order to access other parts of the application. This eliminates the need for global navigation. This type of content navigation is good for task based applications with a small amount of unique screens.

03-hub-spoke-opt-500.png

Bento Box

Commonly used in a “dashboard” type application where the users interact with elements on a single page. Selecting an element on the page will reveal more information or navigation structures.

04-bento-box-opt-500.png

Filtered View

Ideal for applications that deal with a single data set or functionality. This allows the user to quickly select a view from a list to manipulate the content, such as a music application that allows you to search by artist, album or genera etc.

05-filtered-view-opt-500.png

Combing Systems

Sometimes one navigation structure isn’t enough to meet the needs of the content and the user. If this is the case the designer can consider combining one or more navigation structures. For example you could have a Nested Doll structure as the enrollment process on a larger Hierarchical Tree website or application. This allows you to use the best structure and create the best experience for the user.

06-mixed-ia-models-opt-500.jpg

Things to consider when designing a navigation system.

  • Fitts' Law: states that it's faster to hit larger targets closer to you than it is to hit smaller targets further away from you. This pertains to navigation elements that’s are given larger fonts, or significant whitespace to indicate importance.
  • 7 plus or minus 2 for navigation links. Our brains typically can remember and process beteeen 5 and 9 items at a time. If your navigation exceeds 9 items, consider creating a sub menu and group your content accordingly.
  • 3 clicks or less fallacy. Some people stress that it is universally better to have less clicks on an application than more clicks. This isn’t always the case. It is better to have multiple confident clicks than 2 un-confident clicks. In other words, the confidence of the user must be taken into account when designing the application. It is more important that the user feels confident that they are “in the right place” than strictly designing for the least number-of-clicks.

Sources:

https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/

What is Interaction Design?

Screen Shot 2018-03-16 at 3.47.07 PM.png

Interaction Design (IxD) is focused on the interaction of the user with a digital interface. It is primarily focused on the why it works well for the user rather than the implementation or the overall experience.

In contrast, User Experience Design (UXD) focuses on the overall process, and research associated with everything humans interact with. This is not limited to technology and the methodologies used could be applied to almost anything people interact with.

User Interface Design (UI) is the most narrow by definition with it referring to the visual, surface layer, presentation of an interface. This is often what people refer to as the “look and feel” of a digital interface.

One method used for designing an interaction is to start by creating user journeys. User journeys follow the path of a user that is trying to accomplish a task. The designer focuses on the users end goal and writes a brief step-by-step flow or “storyboard” to mimic the users interaction with the interface. This will help flush out the design at a very high level and get the designer thinking about the steps and interactions the user will take to accomplish a task.

Why Visuals Matter

UXD PRINCIPLES AND CONCEPTS

Aesthetics in user interface design include: typography, color, spacing, organization and layout. When these things work together in harmony we perceive them as having a pleasing aesthetic appeal. But why does this matter? This matters because  attractive things are perceived to work better.

patrick-lynch-levels-graphic.gif

Using aesthetics in design cannot only makes your design pretty, but can also help your design “work” better. This is because our brains process visual stimuli at three distinct levels. These levels either travel from the top down, or from the bottom up in relation to the level of consciousness. Bottom up refers to perceiving things at the visceral level, or unconscious level, and having them moves up to the conscious behavior and reflective levels and vise versa.

So how does this play into design? Aesthetics can initially appeal to the visceral level of perception. People that come to use your website will perceive it as being quality and trustworthy if the design is aesthetically appealing. This can have obvious benefits for your brand identity and usefulness of your site.  

Sources:

https://www.vitsoe.com/us/about/good-design

https://alistapart.com/article/visual-decision-making

How Humans Read

UXD PRINCIPLES AND CONCEPTS

Humans are the only beings on the planet that have developed a written from of language. We use this written form to communicate with one another. Most of us have been reading for a very long time, so it seems natural. This week we unpacked the psychology of how our brains process written language and how typography can either help or hinder our abilities to process that information.

When we read, our brains skim across the top of the words in what are called saccades. We then stop at certain points in the text for a fraction of a second while our brains make sense of what we just read. This is called a fixation.

OWT-fig1-2.png

Have you ever wondered why it is difficult to read all caps? This is because the majority of the visual information contained in letters that make them unique is contained in the top half of the letter. Even the shapes that letters form when next to each other is being processed by our brains at lighting speeds. This is partially why using all caps to indicate a button or interactivity has become a common web convention. In the figure below you can see that the all caps letters look more like a rectangular block while the sentence case letters have a more visually distinct shape.

OWT-fig1-7 (1).png

While there isn’t necessarily a right or wrong way to use typography, there are some great guidelines that we can use to make reading as easy as possibly for our users. Some guidelines are:

  1. Keep the number of fonts used at a minimum
  2. Try to use standard fonts
  3. Limit line length
  4. Choose a typeface that works well in various sizes
  5. Use fonts with distinguishable letters
  6. Avoid all caps
  7. Don’t minimize spacing between lines
  8. Make sure you have sufficient color contrast
  9. Avoid coloring text in red or green
  10. Avoid using blinking text

One thing that wasn’t in these tips is to establish a type system that encourages the visual hierarchy. For example, headers and callouts should be sufficiently distinct from body copy by using size, color, and various typefaces to do so.  These tips along with the utilizing the gestalt principles from week 2 will help your readers absorb your content.

 Sources:

https://www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/ 

https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d 

https://alistapart.com/article/how-we-read 

The Golden Ratio

UXD PRINCIPLES AND CONCEPTS

Learning about the golden ratio and how long humans have been using it was really amazing to me. It was even more amazing to learn that it is naturally found in nature. The ratio is 1:1.61. This can be applied to many things but in web design it would equate to 1px to 1.61px or 100px to 161px. This illustration shows a basic use for this ratio be splitting the content on the left with a website navigation bar on the right.

Screen Shot 2017-09-29 at 1.01.47 PM.png

You don’t have to apply this ratio to just layout. You can also apply it to typography. Personified.com has a free automated typography calculator that allows you to set you content width, font size, and characters per line or any combination of them to get recommendations about line height and grid settings etc. Check them out here https://pearsonified.com/typography/ 

Sources: http://www.creativebloq.com/design/designers-guide-golden-ratio-12121546