elements of user experience design - wordpress.com · elements of user experience design ......

31
Elements of User Experience Design Joe Gilbert libraryux.wordpress.com bit.ly/jmu-ux

Upload: phamlien

Post on 31-Mar-2018

238 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Elements ofUser Experience

Design

Joe Gilbert

libraryux.wordpress.combit.ly/jmu-ux

Page 2: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Elements of User Experience Concept, Execution, Assessment

User Requirementssite objectives and needs assessment

Usabilityease of use assessment and refinement

User Experience Designsite design and site architecture

Content Strategycontent inventories, templates, messaging

Page 3: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

What is User Experience?

User Experience employs user research and user-centered design methods to

holistically craft the structure, context, modes of interaction, and aesthetic and emotional aspects of an experience in

order to facilitate satisfaction and ease of use.

Page 4: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

User RequirementsWhat Do We Want to Know?

Organizational and Scholarly

Objectives

User Objectives

Page 5: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

User RequirementsTools for Understanding User Needs

Focus Groupsstrengths, weakness, and priorities

Surveysgeneral user info (problems, not solutions)

Competitive Testingbest practices for a specific problem

Card Sortingsection groupings and system architecture

Analyticscurrent use patterns and popularity

Page 6: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Design Principles

Separate search streams

Re-think “home”

Easy decisions first

Example Principles (from Virgo)

Short & often abstract concepts, based on assessment data, that will drive design.

Page 7: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

User Experience Design

Page 8: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

What is it?Software Interface vs. Hypertext System

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstracttim

eConception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

Jessie James Garrett - jjg.net/ia/elements.pdf

Page 9: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Prototype,Prototype,Prototype

Page 10: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Finding the Right Balance

Fidelity Expediency

Interactivity

?

Page 11: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Designing User Experiences: Sketches & Storyboards

Expressing principles, foregrounding implementation

www.ugleah.com/ux-team-of-one/

Sketchingidea generation, layouts, interaction design, collaborative thinking, experimentation

Storyboardsestablishing narrative context

Simple toolspens, pencils, whiteboards, post-its

Abstract methodsConceptual sketching, mood boards

Page 12: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics
Page 13: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics
Page 14: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Mood Boards

Page 15: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

WireframesIntentional inattention to detail

Page 16: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics
Page 17: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics
Page 18: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Tools of the Trade

Mockingbird https://gomockingbird.com

Balsamiq http://balsamiq.com

Cacoo http://cacoo.com

Axure http://www.axure.com

ScreenGrab http://www.screengrab.org

Screen Capture http://bit.ly/mXUBp5

Skitch http://skitch.com

InVision http://www.invisionapp.com/

CloudApp http://getcloudapp.com/

Wireframing

Sharing

Page 19: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Color Mock-upsPixel-perfect or work-in-progress?

Page 20: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Color Mock-ups

Good ol’ HTML & CSS

Adobe Fireworks

Adobe Photoshop or similar tools

Tools

Pixel-perfect or work-in-progress?

Page 21: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Improving Designs

Page 22: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Predictability vs. Expressivity

Page 23: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Predictability vs. Expressivity

Page 24: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Predictability vs. Expressivity

Page 25: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Matters of Tasteand Best Practice

Layout – Typography – Color – Graphics

Visual hierarchy & priority

Clarity & consistency

Contextual and universal standards

Page 26: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Calls to ActionWhat’s next?

Page 27: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Design Tools

960 Grid System 960.gs

Twitter Bootstrap twitter.github.com/bootstrap

Adobe Kuler kuler.adobe.com

Elements of Typographic Style Applied to the Webwebtypography.net

Page 28: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Information Architecture

Personaeprofiles of archetypal system users, based on survey or analytics data

Site mapsvisual representations of the site’s structure

User storiesshort tales of discrete tasks

Things we already useStoryboards, card sorting activities, analytics

Contexts, navigation, narratives, and goals.

Page 29: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

The Inevitable Argument

Ask for problems, not solutions

Allow every expert his or her expertise

Tell the whole story

Align principles with implementation

Proactively reinforce design decisions

Keep focus on user and organizational goals

Why can’t we do it this way?

Assessment > research > theory > genius

Page 30: Elements of User Experience Design - WordPress.com · Elements of User Experience Design ... bit.ly/jmu-ux. Elements of User Experience Concept, Execution, Assessment ... Analytics

Read on!

UX Mythsuxmyths.com

UIE Brain Sparkswww.uie.com/brainsparks

Alertboxwww.useit.com/alertbox

A List Apartwww.alistapart.com

Smashing Magazine UXuxdesign.smashingmagazine.com