Elements of User Experience Design - WordPress.com · Elements of User Experience Design ......
Transcript of Elements of User Experience Design - WordPress.com · Elements of User Experience Design ......
Elements ofUser Experience
Design
Joe Gilbert
libraryux.wordpress.combit.ly/jmu-ux
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
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.
User RequirementsWhat Do We Want to Know?
Organizational and Scholarly
Objectives
User Objectives
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
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.
User Experience Design
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
Prototype,Prototype,Prototype
Finding the Right Balance
Fidelity Expediency
Interactivity
?
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
Mood Boards
WireframesIntentional inattention to detail
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
Color Mock-upsPixel-perfect or work-in-progress?
Color Mock-ups
Good ol’ HTML & CSS
Adobe Fireworks
Adobe Photoshop or similar tools
Tools
Pixel-perfect or work-in-progress?
Improving Designs
Predictability vs. Expressivity
Predictability vs. Expressivity
Predictability vs. Expressivity
Matters of Tasteand Best Practice
Layout – Typography – Color – Graphics
Visual hierarchy & priority
Clarity & consistency
Contextual and universal standards
Calls to ActionWhat’s next?
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
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.
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
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
Thanks!• The Role of Assessment
• User Studies & Usability
• User Experience Design
Erin [email protected]