Creating An App With Optimal UX

Facts about users

  1. Expend the least amount of energy in doing anything. Ie: users won’t scroll unless told to
  2. People will try to interact with anything that is clickable
  3. Go for simple over complex, less features creates better UX (Andriod V Iphone)
  4. Progressive Disclosure: information presented to a person who isn’t interested or ready to process it is noise. Only necessary and requested information is display at a given time
  5. Hicks law: every additional choice increases the time required to make a decision. More choices give the easier it is to choose nothing

5 planes of UX (ordered top level down)

  1. Strategy - User needs / business objectives
  2. Scope - Functionality and content that needs to be presented
  3. Structure - Interaction design and information layout / organization
  4. Skeleton - Interface, navigation, and information design
  5. Surface (UI) - Visual design

1. Strategy

Ux starts with user needs

  • What do they want and expect from us?
  • How does that fit into their other goals?

What business objectives define success, measurable \

2. Scope

Strategy becomes scope when user needs and business objectives turn into specific actions and items. Need to define:

  • Functional specifications
  • Content requirements

3. Structure

Scope is given structure when we define how the system responds to the users actions.

Key parts to Structure

  1. Interaction design: what happens when user interacts with things
  2. Information architecture: how much stuff is there, how is it organized. Not within a single screen but the entire product

3a. Interaction Design

Key parts to Interaction Design

  1. Consitency helps people use what they know
  2. Visibility of oportunity can invite interaction
  3. Learning is easier when predictions are accurrate
  4. Feedback facility learning

Stay consistent. How to:

  • Key items should always be present to help users navigate and not feel lost.
  • Controls are universal. Components with similar behavior, have similar apperance
  • Behavior If one section uses tooltips all sections should.
  • Voice Labels and terms should be the sameContent and images should have the same style
  • Use design patterns to solve all the above
    • Content may change but interaction and process stay the same
    • Resuable solutions to recurring problems
    • Use other peoples design patterns

Keep things visible. How to:

  • Discovering things doesn’t require luck
  • Users can tell there are is something to interat with or do
  • Use Content hinting and avoid making it look like content is over if it isn’t
  • Make sure things do what people expect them to do

Be predictable. Users shoudl be able to answer:

  • Where am I, How did I get here, What can I do here, and Where can I go from here.

Provide Feedback. Feedback provides:

  • Location, where am I?
  • Status, whats happening is it still happening?
  • Future state, what will happen?
  • Outcome / results, heres what happned
  • Every user action should have a reaction

3b. Information Architecture

Key parts to Information Architecture:

  • Diagram relation of content (categories)
  • Diagram user actions and decisions to filter down in content, how do the move through
  • Define a type of architecture and organizing principle
  • How do users expect to move through information

Types of architecture

Heirarchical Tree: Index page and series of sub pages (most websites)

Good for organizing complicated structures with lots of information

Bad for small screens

Hub & Spoke: central index (hub), navigates out and then comes back to hub

Good for multi functional tools within an app, each function serves it’s own purpose

Bad for navigating inbetween spokes, always return to hub

Sub spokes can be a hub to other spokes

Nested List: Linear path to more detailed content. Top level to sub level navigation to ultimate goal.

Good for apps with singular topic

Bad for exploring

Bento Box (Dashboard): Gives preview of related content and key info. Needs very well designed UI

Good for multi functional tools with similar theme

Critical to understand how each person moves between and interacts with each content hub.

User needs to be able to get back easily

Organizing Principles

What are the nodes of information to be presented?

  • At highest level organization is based on user needs and business objectives
  • Ex: Corporate website would have caeogries of consumer, business and investor. It’s organizing principle is audience
  • Ex: Travel Website would have categories of N americ, S america, Europe. Geography is the organizing principle

Process for creating information architecture

Visual Vocabulary, use a diagram to outline informatoin architechture

Can document actions as well

4. Skeleton

Structure tells the skeleton of the system what it looks like and how users move through the information architecture. Start to deal with individual screens / views and provide visual layouts to them.

  1. Interface design: How to best arrage and present visual elements for the user to interact with.
  2. Navigation Design: onscreen elements that allow users to move through views, tasks and information intuitively. Should match the users expectations

Key principles of skeleton plane:

  1. Utilize single trial learning, things are picked up right away
  2. Use designs and principles from other, more common software
  3. Rapidly establish value in the user’s mind
  4. LEad user toward continuing the experience
  5. Introduce specific content at the most relevant and appropriate points in the experience
    1. Are items that share functionality or logic grouped?
    2. Is information presented in order of importance
    3. Does order match what user expects to do first
  6. Add immediate value with each click / tap
  7. Each action is positive and adds to overall positivity
  8. Number of functions available onscreen effects how useful it is. More functions, less useful
  9. Make things conventional to expectations

4a. Interface Design

Utilize what the user already knows and expects

Progressive Disclosure: Things should progress from simple to complex. Only present what is needed

4b. Information Architecture

Context is everything in a form

5 Organization methods:

  1. Alphabetical: good when non-linear information (ie: contact list) or when no other organizing strategy is appropriate
  2. Categorical: use when clusters of similarity or when people naturally seek out information by category
  3. Continuum: organized by magnitude, lowest to highest, worst to best (ie: search engine results)
  4. Location: use when orientation is important
  5. Time

Information Form uses inverted pyramid

  • Most critical information first
  • Helpful information next
  • Nice to know but unnecessary information

Applies to visual design to

  • Most dominant visual elements first
  • Focal points next, standout but don’t compete with dominant elements
  • Details come last for those who want more

Always use Occam’s Razor: the simplest solution is usually the best

5. Surface

Actual design of the screen / view. Good Visual Deisgn should:

  1. Guide user through data, tasks and information
  2. Support and reinfornce meaning
  3. Reduce cognitivve load, enable recognition and increase intuitive learning

How To Wireframe

Only care about form, shape and function

Wireframes should reflect:

  • Placement of elements on screen
  • Labeling of those elements
  • Navigation scheme (how users get to places)
  • Functionality, behavoir and feedback
  • Make no visual design decisions

Only care about:

  • How much information do we have
  • How is it organized
  • How does it vary from screen to screen
  • How does user navigate frome screen to screen
  • How do we fit all necessary information on the screen

Take into account:

  • What really matters to the business and to the user
  • What needs to be prioritized
  • Sum total of all actions and navigating a user will need to do to achieve business and user goals
  • What choices and actions can a user take, what happens based on those action

Steps To Wireframe

  1. Revisit needs and goals of user and business
    1. How can I measure impact of this action
  2. Define screen and paths (est cores and paths) Basically priotize content on the screen and define clear paths people take to get into and out of each screen
    1. Cores: primary pieces of content and functionality you want users to see and interact with
    2. Paths: what users take to enter and leave each screen in the system
  3. Start sketching
    1. Quickly generate thumbnail sketches of entire app
    2. Goal is to get down high volumn of ideas of what screen look like. Brain dump
  4. Rapid prototyping. Get concrete ideas of layout, how it works and how people interact with it
    1. Wireframe the sketches in something like Sketch
    2. Still no color, font, or designs
    3. Use lorem ipsum content
  5. Review your wireframes, questions to ask:
    1. Is anything important missing?
    2. Is the most important content noticed first?
    3. Is there anything that shouldn’t be here?
    4. Which content is related and how?
    5. Is the purpose of each element clear?
    6. Does the flow of tasks or information match the users need or expectation?
    7. Any additional features or functions needed?