CIS4930 / CIS6930: USER EXPERIENCE DESIGN · CIS4930/6930 User Experience Design, Fall 2015 --Dr....

CIS4930 / CIS6930:USER EXPERIENCE DESIGNINSTRUCTOR: DR. LISA ANTHONY

Fall 2015

10/06/2015CIS4930/6930 User Experience Design, Fall 2015 -- Dr. Lisa Anthony -- [email protected] 1

INFORMATION ARCHITECTURE & WIREFRAMING TECHNIQUES, TOOLS

Week 7a


TOPICS


• Information architecture & navigation

• Conceptual models

• Task analysis & task flows

• Wireframing

• What it is, how to do it

• Tools: Balsamiq, Axure

• In-class activity: next time!

INFORMATION ARCHITECTURE & NAVIGATION

Information Architecture & Wireframing Techniques & Tools


HELPING USERS FIND THINGS


• Information architecture is “…organization and labeling of features, information, and content…” (DFIS, Ch.07, p.143)

• Originally came from library science (e.g., how to organize library collections to make things easier to find).

• Now used to refer to all design of interactive systems.

• Why?

• Because both focus on designing a system to work successfully with the user’s conceptual model of the tasks or activities covered by that system.

TIPS ON ORGANIZATION / NAVIGATION


• Ways to organize things:

• Alphabetical

• Numerical

• Chronological

• By frequency

• By topic

• All good for different types of items or in different contexts where needs focus on one or the other.

• Organize according to user needs and goals.

• What do they expect to find where?

• What items should be near each other?

see also: “LATCH” (Wurman, 1989):* Location* Alphabet* Time* Category * Hierarchy

FUNCTIONAL CARTOGRAPHY


• Functional cartography defines “…where the functionality ‘lives’…” (DIS, Ch.07, p.141).

• Can refer to both the layout on the screen (what buttons go next to what) or the overall structure of the system.

• Important factors to consider:

• Context

• Priority

• Cost

• Ergonomics

• Aesthetics

• Tangibility

NAVIGATION DESIGN AT TWO LEVELS


• Local structure

• Global structure

NAVIGATION DESIGN AT MANY LEVELS


• Local structure:

• Knowing where you are

• Knowing what you can do

• Knowing where you are going / what will happen

• Knowing where you’ve been / what you’ve done

• Global structure

** get some of this from affordances and feedback in

the interface design itself.

NAVIGATION DESIGN AT MANY LEVELS


• Local structure

• Global structure:

• Hierarchy (simple, but beware of differing terminology and avoid too many levels of depth!)

• Dialog (design what screens connect to what, and support multiple paths)

SITE MAPS


• Site maps are used to define the functional cartography / organization / navigation of the system.

• Started with websitesbut are used in many typesof system designs.

• Also: consider states andmodes:

• What functionality is only available when certainconditions are met.

From DFIS, Ch.07, p.142

DESIGNING GOOD NAVIGATION


• Why are users coming to your site / using your app? What needs or desires do they have?

• How will you ensure that those desires or needs are satisfied?

• What supported assumptions can you make about your users and their skills?

• What are the five or ten most important tasks or actions users need to complete?

• Evaluating a design: Are these five or ten actions the clearest, simplest for users to access?

• How can users navigate between related areas of your site?

http://seedandsprout.com/f11_gd410/?page_id=880

QUESTIONS?


CONCEPTUAL MODELS



QUESTION:


• What’s the best way to organize your app or website or interface?

• In a way that makes sense to the users!

• How do they think concepts or features are related?

• What order do they think seems natural to do tasks?

• What kinds of information do they think fit in a category?

• Capture this through users’ “conceptual models”…

WHAT IS A CONCEPTUAL MODEL?




• “…things to think with…” – Rick E. Robinson (DFIS, Ch.05, pp.103)

• Help capture a picture of a particular subject in a way that can be shared between communities.

http://www.achievement.org/autodoc/printmember/wat0int-1



• “…things to think with…” – Rick E. Robinson (DFIS, Ch.05, pp.103)

• Help capture a picture of a particular subject in a way that can be shared between communities.

• Organizing your interfaceso it works with users’ conceptual models insteadof against them is critical.

http://www.achievement.org/autodoc/printmember/wat0int-1

USING CONCEPTUAL MODELS


• Conceptual models can be used to represent many things throughout the design process:

• Results of designer’s understanding of the user research

• Results of market research

• Results of designer’s understanding of the user’s approach to an activity

USING CONCEPTUAL MODELS


• Conceptual models can be used to represent many things throughout the design process:

• Results of designer’s understanding of the user research

• Results of market research

• Results of designer’s understanding of the user’s approach to an activity

Focus on conceptual models’ utility for information architecture activities

TYPES OF CONCEPTUAL MODELS


from DIS, Ch.05, p.105

Linear flow Circular flow

Venn diagram

Map

Sets

Spider diagram

2x2 matrix

CREATING CONCEPTUAL MODELS


• Do this after:

• You have identified features and functionality that must go in your app from your user research.

• Do this before:

• You begin designing how screens will look like.

• Do this in order to:

• Lay out how features and functionality will be organized, connected, and structured in your app.

QUESTIONS?


TASK ANALYSIS & TASK FLOWS



TASK ANALYSIS


• One way to represent and create a conceptual model for your system.

TASK ANALYSIS


• One way to represent and create a conceptual model for your system.

• How do you know what features and functionality to support in your app?

WHAT ARE TASKS?


• List of activities your app will have to support.

• Based on your user research.

• What activities and tasks do your users need?

BE DETAILED ABOUT YOUR TASKS!


• Consider:

• Function

• Level of access required

• Persona

• Pre-requisites

• More…?

• Understanding your tasks in detail will help you understand how they should fit together.

TASK FLOW DIAGRAMS


• Show how tasks are ordered to flow from one to the other naturally according to user’s mental models.

• Note what steps are decision points; what information is needed in order to move on?

• Lead to wireframes (next).

http://alistapart.com/article/strategic-content-management

HOW TO DO A TASK ANALYSIS


1. Choose a task to analyze.

2. Break the task into between 4 and 8 subtasks that cover the whole task. Define objectives for each subtask.

3. Draw the subtasks as a flow diagram. Which subtasks are related to which others? How are they related?

4. Decompose each subtask to the desired level of detail (decide on this in advance!).

5. Test the task analysis on an objective third party (someone who did not participate in the analysis, but who knows the tasks well).

http://www.usabilitynet.org/tools/taskanalysis.htm

DESIGNING A GOOD TASK FLOW


• Where does the user start this task?

• How do they transition from one step within the task to another?

• What happens if they get lost along the way or make a mistake?

• How will they know when they are done?

http://www.jayvaglio.com/wp-content/uploads/2012/01/Presentation.pdf

QUESTIONS?


WIREFRAMING



WHAT ARE WIREFRAMES?


WHAT ARE WIREFRAMES?


• Abstracted views of the design of each screen in your app, site, system, etc.

• Every planned feature / functionality is represented.

PURPOSE OF WIREFRAMES


• Structure

• Information hierarchy

• Controls

• Content

• Note: NOT look-and-feel, colors, or graphics!!

• Goal is to communicate “…all the elements that must be accounted for on a particular screen…” (DIS, Ch.07, p.151).

ANATOMY OF A WIREFRAME


http://rossbelmont.wordpress.com/2011/05/05/annotating-wireframes-in-balsamiq-mockups/

wireframe

What to show:• Content• Controls***• Access / navigation

*** input widgets

Label anything that is not obvious just bylooking at the wireframe.




annotations

Annotate:• Widgets• Conditional items• Constraints

• What item does• Why item is there

Include effect of item (e.g., pressing a button)




metadata

• Designer’s name• Date created• Date last revised• Version number• What changed• Unresolved issues• Documentation• Other notes

LINKING WIREFRAMES


• Combining individual wireframes and your task flow + navigation diagrams to show system structure.

http://www.ospreydawn.com/blog/2014/01/13/Why-great-ux-is-so-important/

Annotation of the flow in a scenario or storyboard –show the actual transitions between frames.

ANOTHER EXAMPLE


http://www.jmparada.com/?m=201302

Annotation of the flow in a scenario or storyboard –show the actual transitions between frames.

TIPS FOR WIREFRAME DIAGRAMS


• Include text labels on all transitions.

• Make clear what interaction the user will do to activate the transition.

• Lay out screens to be easy to draw transitions between them (no overlapping lines!).

• This may mean not laying screens out linearly.

• Label each screen with easy-to-remember name.

• Note: there are lots of bad wireframe diagrams out there! Look for examples that hit these criteria.

MAKING GOOD WIREFRAME DIAGRAMS


• Where does the user start this particular task?

• How do they transition from one step within the task to another?

• What happens if they get lost along the way or make a mistake?

• How will they know when they are done?

• What common mistakes are they likely to make? How are these prevented or handled?

• How does the layout or organization of the page make the answers to these questions as self-evident as possible for users?

http://seedandsprout.com/f11_gd410/?page_id=880Same as for task flow diagrams –because they are closely related!

TOOLS FOR WIREFRAMES


• Balsamiq Mockups

• https://ufl.mybalsamiq.com/projects (free for this class)

• Good for individual wireframes, not so good for diagrams

• Axure Pro

• http://www.axure.com/ (30 day free trial)

• Can handle both individual wireframes and diagrams

• Microsoft PowerPoint or Visio also work!

• Hand-sketching (my favorite! try grid paper!)

• Combination of above

• Ex: make Balsamiq wireframes, print out, paste to paper, hand-sketch transitions and labels

QUESTIONS?


TAKE-AWAY POINTS


• Begin designing the navigation, organization, and structure after you’ve analyzed your user research.

• What tasks do your users want to perform? In what order?

• What items are related in the user’s conceptual model?

• Task analysis and task flow help visualize structure.

• Use standard organization patterns and conventions to help users understand your new app more quickly.

• Wireframes are abstracted designs for all components of each screen in your app: include structure, information hierarchy, controls, content.

• Lay out wireframes in labeled flow diagrams to communicate structure and organization with team.

FOR NEXT TIME…


• Slides will be posted after class.

• Readings through Week 12 are already posted on Canvas, or links are given on the website.

• Work on discussion posts for Week 7 on Canvas.

• Posts can cover classroom topics or reading topics or both.

• Due: 11:59pm Sunday October 11th.

• Keep going on Project #2.

• You should be engaged in design, starting wireframes.

• Post questions about the assignment on Canvas.

• Next time: in-class activity on wireframing + lecture on graphic design for user interfaces!

RESOURCES


• Elaine McVicar. 2013. “Designing for Mobile, Part 2: Interaction Design” in UX Booth. http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

• continuation of UX Booth reading, includes mobile interaction and design patterns

• Richard Wurman. 1989. Information Anxiety. Doubleday, New York.

END


CIS4930 / CIS6930: USER EXPERIENCE DESIGN · CIS4930/6930 User Experience Design, Fall 2015 --Dr....

Documents

Transcript of CIS4930 / CIS6930: USER EXPERIENCE DESIGN · CIS4930/6930 User Experience Design, Fall 2015 --Dr....