UX LIFE CYCLE

Business Information Prototype
Visual Design Usability
Analysis Architect Development

USER EXPERIENCE LIFE-CYCLE
Principles of Experience Design. Design Methodology.

• Introduction
• Business Analysis
• Information Architect
• Visual Design
• Prototype Development
• Usability
1

◄ || UX LIFE CYCLE || Shad Haque || Product Manager / UX Strategist || shad360@gmail.com Orphiks Inc. ©
Ophiks Inc.


Introduction
1. Why User Experience?
• Easy to use
• Fits Expectation
• Meets goals
2. Benefits:
① Fewer abandonment ⑤ Fewer calls
② Increases the usage ⑥ Reduces error
③ Saves development time
④ More registration to the website
2

◄ || UX LIFE CYCLE || Orphiks Inc. ©
Ophiks Inc.


Introduction (continued)
3. Some Facts about Users' Mental Model of
the sites:
• Skimming is in - users scan the text if they
find some connecting word only then they
read the text. Page layout which makes
skimming easy fares better.
• Readability measure:
a. Gunning fog index (measures avg # of
words, sentences and big words)
3

Ophiks Inc.


Introduction (continued)
b. Flesch Reading Ease (avg # of syllables
per word/sentence)
• Scanability: all the elements on a screen
are competing for user's attention.
• Fitts’ law - the time required to rapidly
move to a target area is a function of the
distance to the target and the size of the
target.

4

Ophiks Inc.


Business Analysis
• Requirement
• Research
• Research Methodology

5

Ophiks Inc.


Requirement
1. Screen Incoming Requests (high-level)
• Prioritize by importance and benefits.
• Determine resource availability.
• Determine stakeholders.

6

Ophiks Inc.


Requirement
2. Initiate Project
• Assign project manager (PM) role.
• Meet with team to discuss project subject,
target population, content, process, next
steps, assign rolls and point of contacts.
• Create Focus Group.
• Define a project folder on server for the
project materials and obtain access for
team.
7

Ophiks Inc.


Requirement
3. Begin Charter Initial draft contents
• Sponsors (Customers or clients;
Developers; Users – novice users, expert
users, occasional users and disabled users.
• Stakeholders
• Roles and responsibilities
• Define high-level timeline

8

Ophiks Inc.


Requirement
4. Targets and Goals
• User needs
• Business constraints
• Technical requirement

9

Ophiks Inc.


Requirement
5. Visioning
• PM and 1 member of IDT meet with
sponsors to collect input on what would
constitute a successful website.
• IDT identifies what is accomplishable.
• Draft of scope gets added to Charter.
• Set Benchmark

10

Ophiks Inc.


Requirement
6. Use Case: It is a structured textual specification; and tells who
(the actor) does what (the task).

• Title: Customer pays bill
• Description
• Pre-condition (What must be true at the starting point)
• Post-condition (This will be true upon successful conclusion)
• Basic Path (Most simple set of steps for achieving the goal)
• Alternative paths (Multiple navigation path)
• Exception Paths (Each Use Case may have extensions
where the desired results is not achieved; The Use Case terminates.)
11

Ophiks Inc.


Research
Suggested approaches:
• Identify user subjects and locations (PM).
• Users will be called upon throughout the
entire project process for testing and/or
interviews either in person or by phone.
• Client Support/IS Security:
a) Is there data collected by the help desk?
b) Is there data collected by the security?
• Average to Power users
12

Ophiks Inc.


Research
Suggested approaches (continued):
• Site Audit:
a) Current state content mapping/analysis.
b) Inventory of all web files (docs, forms, html, scripting, images, etc.).
c) Provide audit to Sponsor, who must identify what stays/removed/archived.
• Current State Data Gathering (define what
needs to be tested).

13

Ophiks Inc.


Research Methodology
1. Qualitative Vs Quantitative
• Qualitative: Behaviors , experience,
attitude - Interview of focus group opinions
(sme); fewer people but longer duration
interviews.
• Quantitative: Statistics - Large scale survey,
web survey, market research,
questionnaire.
14

Ophiks Inc.


2. Ethnographic Research
• Do a current state field study (timed
questions/tasks). This is the first hand
observation of real world.
• Compile success rate report.
• Repeat this same task 6 months post
mortem to compare results; what's
working/what needs more improvement.
15

Ophiks Inc.


3. Interviews/Observations
• Compile a list of questions.
• Interview specific users and record
responses.
• Observer (fly on the wall) and make note of
what they do, noting length of time when
appropriate.

16

Ophiks Inc.


4. Surveys
• Create a survey to send out to specific
target audiences.

17

Ophiks Inc.


5. Web-metric Reports
• Run a variety of reports about the current
state (Google analytics).
• AD – who visits key pages

18

Ophiks Inc.


Information Architecture
• Content Analysis
• Strategy
• Content structure
• Design

19

Ophiks Inc.


Content Analysis
1. Heuristic Evaluation
2. Content Audit
3. Content Inventory
4. Concept Maps
5. Content Gap Analysis
6. Card Sorting
• Catalog site content ( use site-audit data).
• Pre-card sort with Internal team.
• Conduct card sorting with end users.
20

Ophiks Inc.


Strategy
1. Concept Model
2. Persona
3. Scenario
• Task Analysis
• Scenario
• Work-Flow/ User-Flow.
(illustrates individual steps a user goes through on the site to reach
their goal - intuitive and logical steps required).
4. Strategy Report
21

Ophiks Inc.


Content Structure
1. Categorization/Architecture
• Define sections of site and organize
content into appropriate sections based
on card sorting data i.e., begin defining
the new category/topic groupings..
• Determine content state, i.e., what needs
to stay, re-written and created.

22

Ophiks Inc.


Content Structure
2. Content Development
• Determine SME list
• Set SME/Leader expectations for content
development and review.
• Provide access to project folder on server.
• Define content development workflow.
• Assign Communication Editor.
• Assign content to SMEs.
• Define content development workflow.
23

Ophiks Inc.


Content Structure
3. Blue Print
• High-level focus on components within
group of pages and relationship between
pages.
• Navigation flow
• Geographical structure.
• Illustrates several concept together.
• Modularizing blue print: top-level to
subsidiary blue print tied through ids.
24

Ophiks Inc.


Content Structure
4. Sitemap
• Gain an understanding of the features,
functionality, and the website’s content.
• Avoid Sitemap Cop-out: Search engine
spiders crawl through the sitemap to find
the pages that are hard to find on the site.
• Looking at site analytics can help figure out
where the traffic to sitemap originates.

25

Ophiks Inc.


Design - Wireframe
1. Function
• Show Relative
• suggest grouping/relationships between
elements.
• Document labeling
• Show functionality

Continue to Content Development…
26

Ophiks Inc.


Design – Wireframe
2. Structure
• How will the pieces of the site be put
together?
• Content: What will be displayed on this site?
• Information Hierarchy: How is the
information organized and displayed?
• Functionality: How will this interface work?
• Behavior: How does it interact with the
user? How does it behave? Relationship.
27

Ophiks Inc.


Design - Wireframe
3. Types of wireframe:
• Sketches (Quick, experimental)
• Lo-Fi (Content only block diagrams)
• Hi-Fi (Detailed functions and behavior)

4. Navigation Types:
• Global
• Primary and Secondary
• Breadcrumb
28

Ophiks Inc.


Design - Prototype
1. Paper Prototype (lo-fi)
• Create Paper Prototype.
• Perform user testing to see if a user can
perform certain tasks.
• Refine categorization and architecture as
needed (3-4 rounds).
• Refine categorization & content as needed.

29

Ophiks Inc.


Design - Prototype
2. Digital Prototype (hi-fi)
• HTML/JavaScript (reflects the paper
prototype).
• Use live navigation to simulate interactivity
(text links, menu buttons, data input etc).

30

Ophiks Inc.


Design - Prototype
3. Digital Prototyping tools
• Visio
• Axure
• InDesign
• Balsamiq
• Irise
• Design8
• Protoshare
• OmniGraffle
31

Ophiks Inc.


Visual Design
• Visual prototype/Art Production
• Visual Design Guidelines

32

Ophiks Inc.


Visual Prototype/Art Production
1. Create all graphical assets, reusable page
chunk, graphics icons, and optimize images
for web presentation.
2. Plan cascading style sheets (CSS). A manual
that defines a set of standards for identity,
design, and writing can promote clarity and
consistency.

33

Ophiks Inc.


Visual Design Guidelines
1. Typography: Arrange by selecting typefaces,
point size, line length, leading, tracking,
kerning.
2. Color: Create primary and secondary color
palette in order to communicate consistent
image of the company.
3. Illustration : Campaign logos and signatures.
Icon design(.ico .cur).

34

Ophiks Inc.


Visual Design Guidelines
4. Images:
a. Print /Screen Use: full color, spot color,
resolution, RGB, pixel based images, &
vector images (Jpg, Eps, Png, Bmp etc).
b. Image naming protocol: Name all
images as such: picture identity _image
#_stocknumber.filetype (Example:
SOLOCYCLE_12345_PDT500.JPG)

35

Ophiks Inc.


Interactive Interface
1. Benefits - All in the same page:
• All stakeholders can review HTML site and
submit and changes.
• All Stakeholders would be on the same
page as they could interact with a virtual
finished design.
• Empirical measurement could be tested.

36

Ophiks Inc.


Interactive Interface
2. Development Process:
• Build HTML/xhtml/html5 pages.
• Create cascading style sheets (CSS2/CSS3).
• Build Javascript/Jquery based interaction.
• Implement jQuery features for quick and
dynamic RIA effects.
• Include Ajax features.
• Use of Meta-data and controlled
vocabulary frameworks.
37

Ophiks Inc.


Usability
• Usability Benefits
• Usability Testing
• Types of Prototyping
• Focus Group
• Human Factor Design

38

Ophiks Inc.


Usability Benefits
1. Ease of learning: How fast can a first time
user get over the learning curve?
2. Efficiency of use: Once a user has learned to
use the system, how fast can a task be done?
3. Memorability: If a user has used the system
before, can he or she remember enough to
use it effectively the next time or does the
user have to start over again learning
everything?
39

Ophiks Inc.


Usability Benefits
4. Error frequency and severity: How often do
users make errors while using the system,
how serious are these errors, and how do
users recover from these errors?
5. Subjective satisfaction: How much does the
user like using the system?

40

Ophiks Inc.


Usability Testing
1. Test the Design at each design stage with the
focus group; iterative design approach.
2. Choose laboratory or remote Testing.
3. Types of Testing:
• Lab testing: camera and observation
• Remote testing: Morae
• Design, create, conduct and evaluate
usability tests.
• Eye-tracking ( Tobii )
41

Ophiks Inc.


Usability Testing (continued)
4. Heuristic Evaluations
5. Card Sorting
6. Survey Evaluation
7. Qualitative and Quantitative data analysis.
8. Ethnography/Contextual Inquiry.
9. Use the appropriate prototyping technology:
• Paper prototype
• HTML /CSS/Javascript Web UI prototype
• Electronic: Axure, Visio, Indesign, Irise.
42

Ophiks Inc.


Types of Prototyping:
1. Low fidelity (wire-frames): Simple layout
sketches focused on content and layout.
2. Slide shows: High fidelity visual design, but
with minimal interactivity.
3. Medium fidelity: visual design with nominal
interaction capability following a scenario.
4. High fidelity: Full interaction capabilities and
detailed screen layouts.

43

Ophiks Inc.


Focus Group - high apparent validity
1. Contextual inquiry (master-apprentice
lessons)
2. Thinking aloud protocol
3. Instrumented browser (macro)

44

Ophiks Inc.


Focus Group - Types
1. Mini groups
2. Dual Operator
3. Client participant
4. Teleconference
5. Dual Moderator

45

Ophiks Inc.


Focus Group - preparation worksheet
1. Performance - How much time, and how
many steps, are required for people to
complete basic tasks?
2. Accuracy - How many mistakes was made?
3. Recall - How much does the user remember
afterwards or after periods of non-use?
4. Emotional response - How does the person
feel about the tasks completed?

46

Ophiks Inc.


Thank you for visiting!
USER EXPERIENCE LIFE-CYCLE
More on the anvil:
Social media marketing
Mobile/iPad apps
Metrics driven design

Share your thoughts so we can improve.

47

Ophiks Inc.


Special thanks to the folks who I follow.

References:
1. http://www.useit.com/
2. http://www.infodesign.com.au
3. http://www.jjg.net/ia/
4. http://www.sitepoint.com/architecture-deliverables/
5. http://www.jrgdesignworks.com/ia.php
6. http://www.humanfactors.com/neurowebbook.asp
7. http://www.mojofat.com/tutorial/

48

Ophiks Inc.

UX LIFE CYCLE

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a UX LIFE CYCLE

Similar a UX LIFE CYCLE (20)

Último

Último (20)

UX LIFE CYCLE