- Facts about users
- 5 planes of UX (ordered top level down)
- 1. Strategy
- 2. Scope
- 3. Structure
- 3a. Interaction Design
- 3b. Information Architecture
- Types of architecture
- Organizing Principles
- Process for creating information architecture
- 4. Skeleton
- 4a. Interface Design
- 4b. Information Architecture
- 5. Surface
- How To Wireframe
- Steps To Wireframe
Facts about users
- Expend the least amount of energy in doing anything. Ie: users wonât scroll unless told to
- People will try to interact with anything that is clickable
- Go for simple over complex, less features creates better UX (Andriod V Iphone)
- 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
- 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)
- Strategy - User needs / business objectives
- Scope - Functionality and content that needs to be presented
- Structure - Interaction design and information layout / organization
- Skeleton - Interface, navigation, and information design
- 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
- Interaction design: what happens when user interacts with things
- 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
- Consitency helps people use what they know
- Visibility of oportunity can invite interaction
- Learning is easier when predictions are accurrate
- 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.
- Interface design: How to best arrage and present visual elements for the user to interact with.
- 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:
- Utilize single trial learning, things are picked up right away
- Use designs and principles from other, more common software
- Rapidly establish value in the userâs mind
- LEad user toward continuing the experience
- Introduce specific content at the most relevant and appropriate points in the experience
- Are items that share functionality or logic grouped?
- Is information presented in order of importance
- Does order match what user expects to do first
- Add immediate value with each click / tap
- Each action is positive and adds to overall positivity
- Number of functions available onscreen effects how useful it is. More functions, less useful
- 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:
- Alphabetical: good when non-linear information (ie: contact list) or when no other organizing strategy is appropriate
- Categorical: use when clusters of similarity or when people naturally seek out information by category
- Continuum: organized by magnitude, lowest to highest, worst to best (ie: search engine results)
- Location: use when orientation is important
- 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:
- Guide user through data, tasks and information
- Support and reinfornce meaning
- 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
- Revisit needs and goals of user and business
- How can I measure impact of this action
- 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
- Cores: primary pieces of content and functionality you want users to see and interact with
- Paths: what users take to enter and leave each screen in the system
- Start sketching
- Quickly generate thumbnail sketches of entire app
- Goal is to get down high volumn of ideas of what screen look like. Brain dump
- Rapid prototyping. Get concrete ideas of layout, how it works and how people interact with it
- Wireframe the sketches in something like Sketch
- Still no color, font, or designs
- Use lorem ipsum content
- Review your wireframes, questions to ask:
- Is anything important missing?
- Is the most important content noticed first?
- Is there anything that shouldnât be here?
- Which content is related and how?
- Is the purpose of each element clear?
- Does the flow of tasks or information match the users need or expectation?
- Any additional features or functions needed?