2. UI/UX Design for iOS 7 Application
These are confidential sessions - please refrain from streaming, blogging, or taking pictures
Session 9 - 10
Vu Tran Lam
IAD-2013
10. Concept of UX Design
• User Experience (UX) is a person's perceptions and responses
that result from the use or anticipated use of a product, system or
service.
• User experience encompasses all aspects of the end-user's
interaction with the company, its services, and its products.
• UX includes all the users' emotions, beliefs, perceptions,
physical and psychological responses, behaviors and
accomplishments that occur before, during and after use.
• User experience design fully encompasses traditional Human-
Computer Interaction (HCI) design and extends it by addressing
all aspects of a product or service as perceived by users.
11. • Users as the centre of UX design
• Understanding the UX design process
• Getting to know about the UX toolkit
Getting started with UX Design
14. Design Thinking
Research Ideate Prototype TestDefine
Empathize with
the audience you
are designing for
Brainstorm
possible designs
Build a
representation
of your ideas
Define the goal
and
requirements
Test your
ideas
for feedback
20. Lean UX
• The role of UX designer is changing
• Less about the beautiful pictures, more about facilitation and
collaboration
• Manages and plans team interaction in the design process
Waterfall UX
Agile UX
WorkEffort
Project Time
WorkEffort
Make
Check
Think
21. Lean UX Design Strategy
Business
Needs
Get internal focus
on
what matters and
prioritize business
goals
Audience
Needs
Prioritize your
audiences, define
them and the
scenarios in which
they would use your
product
Ideation
Brainstorm ways to
satisfy business and
audience needs
Sketching
Flesh out best ideas
and get
stakeholders on
board with
conceptual model
22. • (First) product version to test our ideas as quickly and cheaply
as possible.!
• An MVP has just those features that allow the product to be
deployed and validated, and no more.
• “The minimum viable product is that version of a new product (or
feature) which allows a team to collect the maximum amount of
validated learning about customers with the least effort.”!
• Is not a minimal product, it’s a strategy and process directed
towards making and selling a product to customers.
• The MVP works together with a build-measure-learn cycle:
developing software, gathering customer feedback, and learning
from it.
Minimal Viable Product (MVP)
23. Minimal Viable Product Process
Conceptual inquiry
(CI)
Personas
Empathy map!
Stackeholder map!
User experience
map
Heuristic evaluation
User
Research &
Analysis
1
Inception deck
Storyboard!
Sketchboard!
Elevator pitch!
Flow diagram!
Stories
Story map
“Agile schedule”
Defining &
Scoping
2
Sketches
Wireframes!
Paper prototype!
Mockups
Function prototype
Just-in-time design
Prototypin
g &
3
Usability
Testing
Paper prototype
usability testing
Pair testing
Controlled
experiments
Heuristic evaluation
Cognitive walkthrough
4
24. Lean UX Design Process
Prototype!
Photoshop
Illustrator
Sketch
HTML + CSS + JS
Xcode Storyboard
Define!
Online Research
Conceptual
Inquiry
Personas
Empathy Map
Storyboard
Brainstorming
Summarize!
Discussion
Documentation /
Wiki
Decision of Next
Step
Road Map
Test Externally!
Customer Meeting
A-B Testing
Google Analytics
Survey
Feedback System
Validate Internally!
Whiteboard + Pinboard
Daily Scrum
Internal Survey
Meeting Minutes / Wiki
Sketch!
Sketchboard
Whiteboard
Sketchbook
OmniGraffle /
Balsamiq
UXPin
Illustrator
Powerpoint
Iterate!
Plan and
move to next
cycle
1 2 3 4 5 6 7
Usability
Testing
Sketch!
Sketch Your
Concepts
Screen Wireframing
Major Interaction
Prototype!
Visual Design
Icon + Style
Guide
Screen Mockup
Paper Prototype
HTML Prototype
iOS Prototype
Validate Internally!
Get quick and
frequent feedback
from executive and
team members
Test Externally!
Meet with
customers, find
niche group of
target users
Summarize!
Validate and
learn from user
behavior
Iterate!
Plan and
move to next
cycle
Define!
Discovery and
research to
define user
scenario and
conceptual model
25. Case Study: WeConnect
Prototype!
Photoshop
Illustrator
HTML + CSS + JS
Pop
Xcode Storyboard
Define!
Online Research
Conceptual
Inquiry
Personas
Empathy Map
Storyboard
Brainstorming
Summarize!
Discussion
Documentation /
Wiki
Decision of Next
Step
Road Map
Test Externally!
Customer Meeting
A-B Testing
Google Analytics
Survey
Feedback System
Validate Internally!
Whiteboard + Pinboard
Daily Scrum
Internal Survey
Meeting Minutes / Wiki
Wireframe!
Sketchboard
Whiteboard
Sketchbook
OmniGraffle /
Balsamiq
UXPin
Sketch
Illustrator
Powerpoint
Iterate!
Plan and
move to next
cycle
1 2 3 4 5 6 7
30. Key Points
• Simple and clear
• Less features
• Less screen or pages
• Less button
• Less on “wow”
• More details
• More interactions
• More innovations
• More on customer
feedback
35. • Utility apps enable users to quickly access a specific type of
information or per- form a narrowly defined task.
• Apps well suited to this style include weather, stocks, traffic
reports, calculator, compass,...
• Characteristics of most Utility apps include
• Minimal setup
• Simple flows and layouts
• Standard user interface elements
Utility Applications
37. • Productivity-style apps are more full-featured than Utility apps
and encompass everything from social networking to mobile
banking.
• The time spent with these apps varies based on the context and
task; for example, a user may spend a few seconds checking for
new email messages but several minutes reading the messages.
• Productivity apps are highly diverse, but most can be identified
by the following characteristics:
Hierarchical structure
Accelerators and shortcuts
Productivity Applications
39. • Immersive applications are used to play games, view media, and
perform specialized tasks.
• Users typically turn to games and media apps when they have
some downtime, which can last several minutes or several hours.
• Immersive apps are highly diverse, but most can be identified by
the following characteristics:
Focus on the content
Customized user experience
Immersive Applications
53. • As much as possible, avoid displaying a splash screen or other
startup experience.
• Avoid asking people to supply setup information.
• Delay a login requirement for as long as possible.
• In general, launch in the device’s default orientation.
• Supply a launch image that closely resembles the first screen of
the iOS app.
• If possible, avoid requiring users to read a disclaimer or agree to
an end-user license agreement when they first start your app.
• When your app restarts, restore its state so users can continue
where they left off.
Starting Instantly
55. • An iOS app never displays a Close or Quit option.
• Never quit an iOS app programmatically.
• If all app features are unavailable, display a screen that
describes the situation and suggests a correction.
• If only some app features are unavailable, display either a screen
or an alert when people try to use the feature.
Always be Prepared to Stop
56. Always be Prepared to Stop
If all app features are unavailable, display a screen that
describes the situation and suggests a correction.
57. Always be Prepared to Stop
If only some app features are unavailable, display either a
screen or an alert when people try to use the feature.
58. • Make it easy for people to interact with content and controls by
giving each interactive element ample spacing.
• Make it easy to focus on the main task by elevating important
content or functionality.
• Use visual weight and balance to show users the relative
importance of onscreen elements.
• Use alignment to ease scanning and communicate groupings.
• Make sure that users can understand primary content at its default
size.
• Be prepared for changes in text size.
• As much as possible, avoid inconsistent appearances in your UI.
Layout
59. Layout
Make it easy for people to interact with content and controls by
giving each interactive element ample spacing.
Recommended Not recommended
60. Layout
Make it easy to focus on the main task by elevating
important content or functionality.
61. Layout
Use visual weight and balance to show users the
relative importance of onscreen elements.
66. • Users should always know where they are in your app and how
to get to their next destination.!
• Use navigation bar to give users an easy way to traverse a
hierarchy of data.
• Use tab bar to display several peer categories of content or
functionality.
• Use page control when each app screen represents an
individual instance of the same type of item or page.
• In general, it’s best to give users one path to each screen.
Navigation
67. • It’s critical to get the user’s attention
• A self-contained task must be completed or explicitly
abandoned to avoid leaving the user’s data in an ambiguous
state
Model Contexts
69. • Keep modal tasks simple, short, and narrowly focused.
• Always provide an obvious and safe way to exit a modal task.
• If the task requires a hierarchy of modal views, make sure your
users understand what happens if they tap a Done button in a
view that’s below the top level.
• Reserve alerts for delivering essential and ideally actionable
information.
• Respect users’ preferences for receiving notifications.
Model Contexts
70. • It’s critical to get the user’s attention
• A self-contained task must be completed—or explicitly
abandoned—to avoid leaving the user’s data in an ambiguous
state
Model Contexts
71. • Users know the standard gestures
• Interactive elements invite touch
• Feedback aids understanding
• Inputting information should be easy
Interactivity and Feedback
72. • Avoid associating different actions with the standard gestures.
• Avoid creating custom gestures that invoke the same actions as
the standard gestures.
• Use complex gestures as shortcuts to expedite a task, not as
the only way to perform it.
• In general, avoid defining new gestures unless your app is a
game.
• For iPad, consider using multifinger gestures.
Standard Gestures
73. Standard Gestures
Tap To press or select a control or item.
Drag
To scroll or pan—that is, move side to side.
To drag an element.
Flick To scroll or pan quickly.
Swipe
With one finger, to return to the previous screen, to
reveal the hidden view in a split view (iPad only),
or the Delete button in a table-view row.
74. Standard Gestures
Double tap
To zoom in and center a block of content or an
image.
Pinch Pinch open to zoom in; pinch close to zoom out.
Touch &
hold
In editable or selectable text, to display a
magnified view for cursor positioning.
Shake To initiate an undo or redo action.
75. • To signal interactivity, the built-in apps use a variety of cues,
including color, location, context, and meaningful icons and
labels.
• Users rarely need additional decorations to show them that an
onscreen element is interactive or to suggest what it does.
Interactive Elements Invite Touch
82. • As much as possible, integrate status and other relevant
feedback information into your UI.
!
• Avoid unnecessary alerts.
Feedback Aids Understanding
83. • Make it easy for users to make choices.
• Get information from iOS, when appropriate.
• Balance a request for input by giving users something useful in
return.
Inputting Information Should Be Easy
84. Inputting Information Should Be Easy
Make it easy for users to make
choices.
A date picker in Reminders A list of options in Settings
85. • Add animation cautiously, especially in apps that don’t provide
an immersive experience.
• When appropriate, make custom animation consistent with built-
in animation.
• Use animation consistently throughout your app.
• In general, strive for realism and credibility in custom animation.
Animation
87. • Communicate status and provide feedback
• Enhance the sense of direct manipulation
• Help people visualize the results of their actions
Animation
88. • Incorporate a brand’s assets in a refined, unobtrusive way.
• Don’t take space away from the content people care about.
• Resist the temptation to display your logo throughout the app.
Branding
90. • Color enhances communication
• Text should always be legible
Color and Typography
91. • In iOS 7, color helps indicate interactivity, impart vitality, and
provide visual continuity.
• The built-in apps use a family of pure, clean colors that look
great individually and in combination, and on both light and dark
backgrounds.
!
Color Enhances Communication
92. • In iOS 7, color helps indicate interactivity, impart vitality, and
provide visual continuity.
• The built-in apps use a family of pure, clean colors that look
great individually and in combination, and on both light and dark
backgrounds.
Color Enhances Communication
93. • If you create multiple custom colors, make sure they work well
together.
• Pay attention to color contrasts in different contexts.
• Take bar translucency and app content into account when you use
a custom bar tint.
• Be aware of color blindness.
• Consider choosing a key color to indicate interactivity and state.
• Avoid using the same color in both interactive and non-interactive
elements.
• Color communicates, but not always in the way you intend.
• In most cases, don’t let color distract users.
Color Enhances Communication
94. • Automatic adjustments to letter spacing and line height for every
font size. !
• The ability to specify different text styles for semantically distinct
blocks of text, such as Body, Footnote, or Headline.
• Text that responds appropriately to changes the user makes to
text-size settings (including accessibility text sizes).
Text should always be legible
95. • If you create multiple custom colors, make sure they work well
together.
• Pay attention to color contrasts in different contexts.
• Take bar translucency and app content into account when you use
a custom bar tint.
• Be aware of color blindness.
• Consider choosing a key color to indicate interactivity and state.
• Avoid using the same color in both interactive and non-interactive
elements.
• Color communicates, but not always in the way you intend.
• In most cases, don’t let color distract users.
Color and Typography
96. • The app icon
• Bar icons
• Graphics
Icons and Graphics
97. • Every app needs a beautiful app icon.
• It’s not unusual for people to base their initial opinions about your
app’s quality, purpose, and reliability solely on the look of your
app icon.
The App Icon
98. • The app icon is an important part of your app’s brand. Approach
the design as an opportunity to tell your app’s story and build an
emotional connection with users.
• The best app icons are unique, uncluttered, engaging, and
memorable.
• An app icon needs to look good at many different sizes and on
different backgrounds. Details that might enrich an icon at large
sizes can make it look muddy at small sizes.
The App Icon
99. • iOS provides a lot of small icons—representing common tasks
and types of content—for use in tab bars, toolbars, and
navigation bars.
• It’s a good idea to use the built-in icons as much as possible
Bar Icons
100. Bar Icons
Note that you can use text instead of icons to represent
items in a navigation bar or toolbar.
101. • Support the Retina display.
• Display photos and graphics in their original aspect ratio, and
don’t scale them greater than 100%.
• Don’t use images that replicate Apple products in your designs.
Graphics
102. • Every word you display in an app is part of a conversation you
have with users.
• Use this conversation as an opportunity to provide clarity and to
help people feel comfortable in your app.
Terminology and Wording
103. Terminology and Wording
Settings is an essential app for all users, so it uses simple,
direct language to describe what users can do.
104. • Use terminology that you’re sure your users understand.
• Use a tone that’s informal and friendly, but not too familiar.
• Think like a newspaper editor, and watch out for redundant or
unnecessary words.
• Give controls short labels or use well-understood icons.
• Take care to be accurate when describing dates.
• Make the most of the opportunity to communicate with potential
users by writing a great App Store description.
Terminology and Wording
105. • Using standard UI elements correctly
• Responding to changes in device orientation
• Avoiding sending users to Settings
• Taking advantage of iOS technologies
Integrating with iOS
106. • Follow the guidelines for every UI element.
• Don’t mix UI element styles from different versions of iOS.
• In general, avoid creating a custom UI element that performs a
standard action.
• Don’t use system-defined buttons and icons to mean something
else.
• If your app enables an immersive task or experience, it may be
reasonable to create completely custom controls.
Using Standard UI Elements Correctly
107. • Maintain focus on the primary content in all orientations.
• Launch your app in the supported orientation, regardless of the
current device orientation.
• Avoid displaying a UI element that tells people to rotate the
device.
• Support both variants of an orientation.
• If your app interprets changes in device orientation as user input,
handle rotation in app-specific ways.
• On iPhone, anticipate users’ needs when you respond to a
change in device orientation.
• On iPad, strive to satisfy users’ expectations by supporting all
Responding to Changes in Device Orientation
108. Responding to Changes in Device Orientation
Launch your app in the supported orientation,
regardless of the current device orientation.
109. • If possible, avoid sending users to Settings.
• If necessary, let users set behaviors they want within your app.
• As much as possible, offer configuration options in the main UI.
Avoiding Sending Users to Settings
110. • iOS provides a wealth of technologies that support common
tasks and scenarios in ways that users expect.
• This expectation means that it’s almost always better to integrate
system-supported technologies into your app than it is to design
a custom approach.
Taking Advantage of iOS Technologies
111. Icon and Image Design
• App icon
• Launch images
• Bar button icons
• Newsstand icons
• Web clip icons
• Creating resizable images
112. App Icon
• Every app needs a beautiful, memorable app icon that attracts
people in the App Store and stands out on their Home screen.
113. App Icon
• For the best results, enlist the help of a professional graphic
designer.
• Use universal imagery that people will easily recognize.
• Embrace simplicity.
• Create an abstract interpretation of your app’s main idea.
• If you want to portray real substances, do it accurately.
• Make sure the app icon looks good on a variety of backgrounds.
• Avoid transparency.
• Don’t use iOS interface elements in your artwork.
• Don’t use replicas of Apple hardware products in your artwork.
114. App Icon
• Create different sizes of the app icon for different devices.
For iPhone and iPod touch, both of these sizes are required:
• 120 x 120 pixels
• 60 x 60 pixels (standard resolution)
For iPad, both of these sizes are required:
• 152 x 152
• 76 x 76 pixels (standard resolution)
120 x 120 pixel icon after the mask is applied120 x 120 pixel icon before the mask is applied
115. App Icon
• Create a large version of your app icon for display in the App
Store.
For the App Store, create a large version of your app icon in two sizes so
that it looks good on all devices:
• 1024 x 1024 pixels
• 512 x 512 pixels (standard resolution)
116. Spotlight and Settings Icons
• Every app should supply a small icon
that iOS can display when the app
name matches a term in a Spotlight
search.
• Apps that supply settings should also
supply a small icon to identify them in
the built-in Settings app.
117. Spotlight and Settings Icons
• Supply separate icons for Spotlight search results and Settings
For Spotlight search results on iPhone, iPod touch, and iPad create an
icon in the following two sizes:
• 80 x 80 pixels
• 40 x 40 pixels (standard resolution)
For Settings on iPhone, iPod touch, and iPad create an icon in the
following two sizes:
• 58 x 58 pixels
• 29 x 29 pixels (standard resolution)
118. Launch Images
• A launch image is a simple placeholder image that iOS displays
when your app starts up.
• The launch image gives users the impression that your app is
fast and responsive because it appears instantly and is quickly
replaced by the first screen of your app.!
!
119. Launch Images
• Supply a plain launch image that improves the user experience.
In particular, the launch image isn’t an opportunity to provide:
• An “app entry experience,” such as a splash screen
• An About window
• Branding elements, unless they are a static part of your app’s first
120. Launch Images
• Design a launch image that is identical to the first screen of the
app, except for Text and UI elements that might change.!
Not recommendedRecommended
121. Launch Images
• Create launch images in different sizes for different devices.
For iPhone 5 and iPod touch (5th generation):
• 640 x 1136 pixels
For other iPhone and iPod touch devices:
• 940 x 960 pixels
• 320 x 480 pixels (standard resolution)
For other iPhone and iPod touch devices:
• 1536 x 2048 pixels
• 768 x 1024 pixels (standard resolution)
122. Bar Button Icons
• iOS defines lots of standard bar-button icons, such as Refresh,
Share, Add, and Favorites.
• As much as possible, you should use these buttons and icons to
represent standard tasks in your app.
• At a high level, you should aim for an icon design that is:
• Simple and streamlined.
• Not easily mistaken for one of the system-provided icons.
• Readily understood and widely acceptable.
123. Bar Button Icons
• Whether you use only custom icons or a mix of custom and
standard, all icons in your app should look like they belong to the
same family in terms of perceived size, level of detail, and visual
weight.
The family of iOS bar icons
The coherent family of icons
124. Bar Button Icons
• If you’re designing a custom tab bar icon, you should provide
two versions—one for the unselected appearance and one for
the selected appearance
To create a filled-in version of an icon that has interior
details (such as the Radio icon) invert the details so
they retain their prominence in the selected version.
Sometimes, a design needs a slight alteration to
look good when it’s selected. For example, because
the Timer and Podcasts icons include open areas,
the selected versions condense the strokes a bit to
fit into a circular enclosure.
125. Bar Button Icons
If an icon becomes less recognizable when it’s filled
in, a good alternative is to use a heavier stroke to draw
the selected version. For example, the selected
versions of the Voicemail and Reading List icons are
drawn with a 4-pixel stroke, instead of the 2-pixel
stroke that was used to draw the unselected versions.
If an icon’s shape has details that don’t look good in a
stroked outline. For example with Music and Artists
icons) you can use the filled-in appearance for both
versions of the icon. It’s easy for users to distinguish
the selected and unselected appearances of such
icons because the selected appearance is darker
and gets the tint.
126. Bar Button Icons
• To design a custom bar icon, follow these guidelines:
• Use pure white with appropriate alpha transparency.
• Not include a drop shadow.
• Use antialiasing.
127. Bar Button Icons
• Use a 2-pixel stroke (high resolution) for detailed icons and a 3-
pixel stroke for less detailed icons.
Create a toolbar or navigation bar icon in the following sizes:
• About 44 x 44 pixels
• About 22 x 22 pixels (standard resolution)
Create a tab bar icon in the following sizes:
• About 50 x 50 pixels (96 x 64 pixels maximum)
• About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution
128. Newsstand Icons
• If your app uses Newsstand Kit to publish subscription-based
periodical content, you need to provide icons for display in the
App Store and on people’s devices.
129. Newsstand Icons
• A default Newsstand cover icon should be a generalized
facsimile of the cover of a typical issue, which focuses on the
parts of the cover that are fairly consistent from issue to issue.
For example:
• Avoid adding to the default cover icon elements that users would never
see on an actual cover, such as a message to “tap here for the latest
issue”.
130. Newsstand Icons
• To display the current issue’s icon on the Newsstand shelf and in
the multitasking UI, iOS scales your large icon to the following
Device Scaled size (Newsstand shelf) Scaled long-edge size (multitasking UI)
iPhone and
iPod touch
180 x 160 pixels (90 x 80 pixels
for standard resolution)
120 pixels (60 pixels for standard
resolution)
iPad
252 pixels for long edge (126
pixels for standard resolution)
152 pixels (76 pixels for standard
resolution)
131. Web Clip Icons
• If you have a website, you can provide a custom icon that users
can display on their Home screens using the web clip feature.
• Web clip icon sizes.
For iPhone and iPod touch, create icons that measure:
• 120 x 120 pixels
• 60 x 60 pixels (standard resolution)
For iPhone and iPod touch, create icons that measure:
• 152 x 152 pixels
• 76 x 76 pixels (standard resolution)
132. Creating Resizable Images
• You can create a resizable image to customize the background
of several standard UI elements, such as popovers, buttons,
navigation bars, tab bars, and toolbars (including the items on
these bars).
• As a general rule, you should supply the smallest image:
• If you want a solid color with no gradient, create a 1 x 1 point image.
• If you want a vertical gradient, create an image that has a width of 1
point and a height that matches the height of the UI element’s
background.
• If you want to provide a repeating textured appearance, you need to
create an image with dimensions that match the dimensions of the
repeating portion of the texture.
• If you want to provide a nonrepeating textured appearance, you need
134. UI/UX Design Principles
• Aesthetic integrity
• Consistency
• Direct manipulation
• Feedback
• Metaphors
• User control
135. Aesthetic Integrity
• Aesthetic integrity doesn’t measure the beauty of an app’s
artwork or characterize its style; rather, it represents how well an
app’s appearance and behavior integrates with its function to
send a coherent message.
• People care about whether an app delivers the functionality it
promises, but they’re also affected by the app’s appearance and
behavior in strong—sometimes subliminal—ways.
137. Consistency
• Consistency lets people transfer their knowledge and skills from
one part of an app’s UI to another and from one app to another
app.
• A consistent app isn’t a slavish copy of other apps and it isn’t
stylistically stagnant; rather, it pays attention to the standards
and paradigms people are comfortable with and it provides an
internally consistent experience.
139. Direct Manipulation
• When people directly manipulate onscreen objects instead of
using separate controls to manipulate them, they're more
engaged with their task and it’s easier for them to understand the
results of their actions.
• Using the Multi-Touch interface, people can pinch to directly
expand or contract an image or content area. And in a game,
players move and interact directly with onscreen objects—for
example, a game might display a combination lock that users
can spin to open.
141. Feedback
• Feedback acknowledges people’s actions, shows them the
results, and updates them on the progress of their task.
• The built-in iOS apps provide perceptible feedback in response
to every user action. List items and controls highlight briefly
when people tap them and—during operations that last more
than a few seconds—a control shows elapsing progress.
143. Metaphors
• When virtual objects and actions in an app are metaphors for
familiar experiences—whether these experiences are rooted in
the real world or the digital world—users quickly grasp how to
use the app.
• It’s best when an app uses a metaphor to suggest a usage or
experience without letting the metaphor enforce the limitations of
the object or action on which it’s based.
• Metaphors in iOS include:!
• Moving layered views to expose content beneath them
• Dragging, flicking, or swiping objects in a game
• Tapping switches, sliding sliders, and spinning pickers
• Flicking through pages of a book or magazine
144. User Control
• People—not apps—should initiate and control actions. An app
can suggest a course of action or warn about dangerous
consequences, but it’s usually a mistake for the app to take
decision-making away from the user.
• The best apps find the correct balance between giving people
the capabilities they need while helping them avoid unwanted
outcomes.
• Users feel more in control of an app when behaviors and controls
are familiar and predictable. And when actions are simple and
145. From Concept to Product
Prototype!
Photoshop
Illustrator
Sketch
Pop
Xcode Storyboard
Define!
Online Research
Conceptual
Inquiry
Personas
Empathy Map
Scenarios
Storyboard
Brainstorming
Summarize!
Discussion
Documentation /
Wiki
Decision of Next
Step
Road Map
Test Externally!
Customer Meeting
A-B Testing
Survey
Feedback System
Validate Internally!
Whiteboard + Pinboard
Daily Scrum
Internal Survey
Meeting Minutes / Wiki
Sketch!
Sketchbook
Whiteboard
OmniGraffle /
Balsamiq
UXPin
Illustrator
Powerpoint
Iterate!
Plan and
move to next
cycle
1 2 3 4 5 6 7
Usability
Testing
Sketch!
Sketch Your
Concepts
Screen Wireframing
Major Interaction
Prototype!
Paper Prototyping
Visual Design
Static Image
Prototyping
iOS Prototyping
Validate Internally!
Get quick and
frequent feedback
from executive and
team members
Test Externally!
Meet with
customers, find
niche group of
target users
Summarize!
Validate and
learn from user
behavior
Iterate!
Plan and
move to next
cycle
Define!
Discovery and
research to
define user
scenario and
conceptual model
146. From Concept to Product
• Defining and scoping your app
• Sketching and Wireframes
• Prototyping and iterating
• Usability testing app concepts
1
2
3
4
147. • Creating your app definition statement
• Getting started with user research
• Analyzing user research
• Evaluating the competition
• Effective brainstorming
• Design Tools
1 Defining and Scoping Your App
148. Creating your App Definition Statement
• An app definition statement is a concise, concrete declaration of
an app’s main purpose and its intended audience.
• Create an app definition statement early in your development
effort to help you turn an idea and a list of features into a
coherent product that people want to own.
• Throughout development, use the definition statement to decide
if potential features and behaviors make sense.
• Steps:
List all the features you think users might like
Determine who your users are
Filter the feature list through the audience definition
1
2
3
149. Listing All Features You Think Users Might Like
• At this point, you’re trying to capture all the tasks related to your
main product idea.
• Imagine that your initial idea is to develop an app that helps
people shop for groceries. You must list the potential features-
that users might be interested in.!
• For example:
• Creating lists
• Getting recipes
• Comparing prices
• Locating stores
• Annotating recipes
• Getting and using coupons !
• Viewing cooking demos
• Exploring different cuisines
• Finding ingredient
substitutions
150. Determining Who Your Users Are
• Now you need to figure out what distinguishes your app’s users
from all other iOS users. In the context of your main idea, what’s
most important to them?
• Using grocery-shopping example, you might ask whether your
users:
• Usually cook at home or prefer ready-made meals
• Are committed coupon-users or think that coupons aren’t worth the
effort
• Enjoy hunting for speciality ingredients or seldom venture beyond the
basics
• Follow recipes strictly or use recipes as inspiration
• Buy small amounts frequently or buy in bulk infrequently
• Insist on specific brands or make do with the most convenient
151. Determining Who Your Users Are
• After musing on these questions, imagine that you decide on
three characteristics that best describe your target audience:
• Love to experiment with recipes
• Are often in a hurry
• Are thrifty if it doesn’t take too much effort
152. Filtering Feature List Through Audience
Definition
• If, after deciding on some audience characteristics, you end up
with just a few app features, you’re on the right track: Great iOS
apps have a laser focus on the task they help users accomplish.
• For example, consider the long list of possible features you came
up with in Step 1. Even though these are all useful features, not
all of them are to be appreciated by the audience you defined in
Step 2.!
• When you examine your feature list for your target audience, you
conclude that your app should focus on three main features:
Creating lists, getting and using coupons, and getting recipes.
• Now you can craft your app definition statement, concretely
summarizing what the app does and for whom. A good app
definition statement for this grocery-shopping app might be:
153. Getting Started with User Research
• Common user research questions
• Choosing user research methods
• Planning your research
!
154. Analyzing User Research
• Share the wealth
• Analyze notes
• Document implications and ideas
• Report findings
155. Share the Wealth
• One of the first things to do after a study is gather the artifacts
and post them in a place where other team members can view
them.
• Intranets and wikis are great, but so is an actual physical space
within your company. You can use invisible tape on the wall,
whiteboard, or foam core.
• Benefits of the artifacts visible:
• Surrounding everyone with this content will create a shared
understanding within your organization.
• It simplifies analysis since the medium makes it easy to collaboratively
analyze findings.
• The physical representation can be referred to in the later design
157. Analyze Notes
• The depth and format of your interview notes (handwritten,
transcripts, verbatim notes) will influence your approach.
• Tips for this type of analysis:
• Try to limit your team to four to six people.
• Minimize conversations and debates while writing up observations.
• Ensure that observations are written in concise phrases or sentences.
• If one sticky group is much larger than the others, consider splitting
• Connect related sticky groups with lines.
• Collaboratively prioritize findings when all observations have been
placed within a group.
• Provide a key if you color-code your stickies (e.g., heading vs findings vs
159. Document Implications and Ideas
• Implications suggest best practices or design principles your
team wants to follow, whereas ideas are specific features or
concepts you may want to incorporate in the actual design.
• These should also be written on stickies, using a different color
from the observations and titles. You may want to post a color
key if other team members are involved in the process.
• At the end of the day, take photos of the groupings in case any
stickies get accidentally moved or fall off the wall.
• Doublesided tape can help keep the stickies in place. If you
want to create electronic versions of your affinity diagrams,
consider using the Stickies Dashboard widget on the Mac or lino
(http://en.linoit.com), a webbased tool for organizing sticky notes
161. Report Findings
• Quick Findings report will give you an opportunity to stew on the
material and brainstorm additional implications and ideas. This
report also makes your findings more portable, because you can
take them anywhere once you’ve moved from the sticky notes to
electronic documents.
• There are countless ways to organize your findings and make
them more shareable (e.g., in a report, presentation, wiki,
summary poster)
• Report elements:
• Methodology and goals
• Team members
• Participant profiles
163. Benefit
• Competitive UX analyses can help your team uncover best
practices as well as approaches to avoid when designing your
app.
• These analyses can assess how competitors are meeting the
user needs identified in your up-front user research and uncover
market opportunities.
• Best practices
• What to avoid?
• Needing alignment
• Inspiration
164. Apps to Include
• As you prepare your list of apps to analyze, consider consulting
with your friends, perusing relevant categories in the App Store,
and reading app reviews of competitive or similar apps.
• It may be tempting to focus exclusively on your top competitors,
but that’s not necessarily the most effective strategy.
• If your top competitors have nearly identical user experiences,
you may not learn anything significant after evaluating the first
one.
• Instead, you may find it valuable to expand your evaluation to
include emerging comp.
165. Choosing a Competitive Analysis Method
Method Strengths Weaknesses
Needs
alignment
charts
Good for assessing where
competitors are meeting user
needs
No best practices or inspiration
Two-by-two
diagrams
Good way to illustrate how the
app fits into the overall
competitive landscape
No best practices or inspiration
Attributes highly subjective
Heuristic
evaluations
Fast and inexpensive Dependent on reviewer’s
expertise and heuristics used
Good for determining best
practices and finding inspiration
Competitive
benchmarking
Good for gathering quantitative
data
Time-consuming and expensive
No understanding of why behind
behaviors unless follow-up
interview is included
166. Effective Brainstorming
• To kick off your app concept explorations, consider holding a
group brainstorming session.
• To avoid this outcome, try some following brainstorming advice:
• Set aside enough time
• Establish goals
• Be inclusive
• Have an agenda
• Provide inspiration
• Lay ground rules
• Capture ideas
• Select promising idea
168. Guidelines
• Always have a reason for customization.
• As much as possible, avoid increasing the user’s cognitive
burden.
• Be internally consistent.
• Always defer to the content.
• Think twice before you redesign a standard control.
• Be sure to thoroughly user-test custom UI elements.
169. Design Tools
• To make your research findings more readily accessible, you
may want to distill the content in a variety of ways.
• Tools to create design:
• Contextual Inquiry
• Personas
• Empathy map
• Stakeholder map
• Scenarios
• User Journeys
• Storyboard
• “Agile schedule”
170. Contextual Inquiry
• Day-in-the-life sessions
• Observe/interview people in their context
• Pair of observers is ideal
• Key benefits:
• Best way to understand your users
• Only way to know what the real work flow/process is (vs the official one)
• Opportunity to discuss with users what they are doing and why
!
172. Personas
• Characterization of a type of user that we want to target with our
product/application
• Personas are categorized:
• Primary personas are the ones whose needs you must address for
business.
• Secondary personas are important but lower priority.
• Negative personas are the ones you’re clearly not addressing for
business.!
• Personas contain:!
• Name, profession, age, location
• Attitudes & activities
• Influencers
• Workflows
• Pain points and frustrations
• Goals
173. I often get caught up in my iPhone.
Marta, College Sophomore
Every morning Marta reaches across her bed to grab her iPhone to check her email, and Facebook.
A persona represents a cluster of users
who exhibit similar behavioral patterns
in their purchasing decisions, use of
technology or products, customer
service preferences, lifestyle choices,
and the like. Behaviors, attitudes, and
motivations are common to a "type"
regardless of age, gender, education,
and other typical demographics. In fact,
personas vastly span demographics.
”
-- Kevin O’Connor
Persona:!
• Gives a human face to every target
group!
• Helps teams to focus on user’s
problems not features!
• Represents research data in an easy
way (if it’s backed with data)
Marta typically brings both her Macbook and iPhone to campus.
19
Sophomore at NYU majoring in psychology
Marta mostly uses the iPhone for fun, but she’s been experimenting with some apps for school.
Reference apps, such as the flash cards for her Chinese class, have been more valuable to her.
College Student
Check email, calendar and Facebook
Stay in contact with friends and family
Enjoy simple and pleasing aesthetics
Many apps feel disconnected (e.g,, she edits photos with Photoshop before posting them to Facebook)
Impulsive buyer Experiment user Entertain herself
174. • Explore a target user (persona) from different perspectives: Who
am I? Behavior, See - Motivations, Do - Features, Say, Feel
• Question: Who are your users? What do they need/want?
• Key benefits of empathy map:
• Very quick way to have a holistic view of your target user
• Forces you to think about more than their role
• Allow team to ground communication throughout development
Empathy Map
178. • A network diagram of the people involved with (or impacted by)
a given system design
• Who does it? The Team
• Key benefits:
• Establish shared ideas about stakeholders
• Help team focus on people, not technology
• Guide plans for user research
• Document research activities
Stakeholder Map
180. • Draw simple icons to represent individual people!
• Label individuals by specific role
• Write a speech-bubble to summarize thoughts and feeling
• Draw lines with arrows connecting the people
• Label lines to describe relationships between people
• Circle and label related groupings
Stakeholder Map Tips
181. Scenarios
• Scenarios describe how personas may use your app to achieve
their goals.
• In the very early stages, scenarios tend to be written at a high
level without many user interface elements, and allow your team
to brainstorm a wide variety of design directions, rather than
confining yourselves to a particular solution.!
• Scenario content typically includes the following information:
• Motivation
• Context
• Distractions
• Goal
183. Scenarios
• Motivation
• Context
• Where is the persona while the scenario is taking place?
• Does the context change over the course of the scenario?
• Who else is involved?
• What other devices are involved?
!
184. Scenarios
• Motivation
• Context
• Distractions
• What kinds of distractions or interruptions typically occur in the
scenario?
• How does the persona deal with such distractions?
!
185. Scenarios
• Motivation
• Context
• Distractions
• Goal
• What is the persona’s goal in the scenario?
• Is it information, an artifact, an emotion?!
!
186. Scenarios
Need Scenario with College Sophomore Persona
Getting to a new classroom
!
It’s the first day of Marta’s sophomore year at NYU. She just
finished eating lunch at a café on Waverly Place and is scanning
her afternoon schedule in iCal, which she synced to her iPhone
from her laptop the night before.
!
Marta notices that her 2:00 p.m. class is held in the Puck Building.
Although Marta is a sophomore, she’s never taken any classes at
Puck. She goes to the NYU web site using Safari on her iPhone,
but the site isn’t formatted for the device. After several minutes of
pinching and zooming, Marta finally finds the building. It’s not
linked to Google Maps, so she mentally notes the cross streets
before exiting Safari.
!
Brainstorm topic:
!
How can an iPhone app make Marta’s life easier?
Name: Marta,
College Sophomore
187. Scenarios
• Common questions
• How many scenarios should I write?
• Are scenarios just for design?
• What’s the difference between use cases and scenarios?
• What about user “stories”?
!
188. From Scenarios to Use Cases
• Use cases are much more concise than scenarios and may
include aspects of the back end, often called the “system.”
• They help uncover flow and usability issues in the later stages of
design, but they are generally too system- oriented for early-
stage brainstorming.
• The NYU iPhone app, for example, could be described with the
following use cases:
• User chooses building list.
• System provides list.
• User chooses P.
• System shows buildings that start with P.
189. From Scenarios to User Stories
• User stories are commonly used in the Agile software
development process.
• They tend to be more feature-oriented than scenarios since they
must be broken down for the “backlog” (items planned for the
next development cycle).
• Moreover, although the term story is used, user stories read more
like requirements given the language and specificity.
• The NYU iPhone app, for example, could be described with
three potential user stories:
• A user can browse campus buildings by name.
• A user can view detailed information for each building.
• A user can get directions to each building.
190. User Journeys
• User journeys offer an effective way to share research findings.
• The design team can use them as a quick reference throughout
the design process or as a communication tool when explaining
design decisions to other members of your company.
• The journeys typically encompass the entire user experience—
from app discovery to app usage along an abstract timeline—
with each part kept at a very high level.
• User journeys may seem overly linear at first glance, but they are
not meant be taken literally. It may help to view them as design
requirements based on persona needs, rather than actual user
flows.
191. User Journeys
• The user journey created for an app that complements an
existing web site for art events:
Discover!
Where they learn
about the app
Find!
How they find events
Learn!
What they need
to decide to
attend
Attend!
What they need to
get to the event
Review!
What they want to
include in a review
All Personas App Store
Artist name,
reviews, images,
description
Venue name and
address
Martin!
Local art
enthusiast
Our web site
Artist friends
Galleries
Prefers to search or
browse for genre or
artist of interest
Number of days
before the event
closes
May not need
maps if attended
the venue in the
past
Prefers to do lengthy
reviews, thus more
likely to do via the
website
Katherine!
Local art
dabbler
Our web site
Galleries
Relies on popular lists
or proximity to work/
home
Days before the
event closes and
gallery hours
Often needs maps
and directions
Occasionally does
brief text reviews
Zoe!
Tourist art
enthusiast
Art magazines
Often seeks out a
genre or artist of
interest; hotel may be
located in an area with
galleries
Gallery hours
Needs maps and
directions
Prefers to do
lengthy reviews;
may write in the
hotel on a laptop
Charles!
Tourist art
dabbler
Guidebook
Google
Time Out New
York
Relies on popular lists
and proximity to hotel
Gallery hours
Needs maps and
directions
Rarely does reviews;
if anything may do
thumbs up/down
192. Storyboard
• Use of story telling to quickly visualize/share a solution to
specific problem making use of personas and their behaviors,
stories and any known constraints.
• Who does it? The team
• Key benefits:
• Help us think about the problem in a creative way
• Facilitates focused communication
• Affordable and easy to do
194. • Visual project schedule on butcher paper containing:
• Weekly milestones
• Existing design and layout info
• User stories with due dates
• Non-functional requirements
“Agile Schedule”
• Any other high-level task
that needs to be tracked
and completed before
launch
195. • Creating design-friendly environment
• Sketching your concepts
• Screen wireframing
• Major interaction
2 Sketching and Wireframes
196. Creating Design-Friendly Environment
• Before getting started, spend some time creating a design-
friendly work environment.
• Equipments for brainstorming and day-to-day design:
• Conference room with one large wall
• Whiteboard and camera
• Foam core
• Easel Post-its
• Sketchbooks
• Pencils and markers
• Odds and ends
• Snacks
200. Characteristics
• The term sketch means different things to different people that
helps designers think through an idea and the resulting artifact
that communicates the idea.
• Sketches in this context tend to have these qualities:
• Minimal detail
• Limited refinement
• Ambiguity
201. Benefits
• Some benefits of starting with hand-drawn sketches:
• Think big
• No boundaries
• Improve collaboration
202. But I Can’t Draw
• Getting into sketching may seem challenging given that many
people are accustomed to drawing with software.
• Sketching can be intimidating when looking at the work of
experienced designers - their sketches can technically be
described as rough and ambiguous but they are still somehow
beautiful.
• Solutions:
• Taking a drawing class
• Starting with tracing or stencils, then slowly add your own design
elements
203. But I Can’t Draw
iPhone Stencil Kit by Design Commission
207. Concept Posters
• Concept posters are a powerful way to illustrate your app vision
without getting into the design details.
• Alexa Andrzejewski, the founder of Foodspotting, developed a
concept poster template, which includes the following:
• App name and tagline
• Pitch
• Characteristics
• Inspiration
208. Concept Screens
• Concept screen sketches are effective way to explore alternative
directions without getting into design details. With this approach,
the designer may illustrate one aspect of the user experience,
while explaining other elements in written annotations or verbally.
• Aspects of these sketches that work well include the hand
gestures, simple screen contents, and concise annotations.
• Screen sketches can also be used to explore alternative
interaction models for a particular concept.
209. Concept Screen
Your World concept for the
Smart.fm iPhone
“Scratch-off” concept for
the Smart.fm iPhone
210. Storyboards - Sketchboards
• Storyboards contain a series of illustrations or images displayed
in sequence
• With user-centered design, the “story” behind the storyboard is
typically one of the scenarios from up-front user research.
• Each illustration in the sequence represents an action the user
must take to reach the scenario goal.
• Storyboards may include arrows or instructions to indicate
movement as well as annotations.
220. Why Prototype?
• Prototypes can help you solve design problems, evaluate
designs, and communicate design ideas.
• These up-front activities can also expedite the development
process, saving valuable time and money.
The most common estimate is that it’s 100 times cheaper to
make a change before any code has been written than it is to
wait until after the implementation is complete.
!
—Jakob Nielsen
”
221. Why Prototype?
• Features of prototyping:
• Solving design problems
• Evaluating design ideas
• Communicating design ideas
222. Prototyping Approaches
• Paper prototyping
• Static images on device prototyping
• iOS prototyping with Xcode storyboard
223. Paper Prototyping
• Paper prototyping introduction
• Benefits!
• Issues to explore
• Challenges
• How to do it?
224. Paper Prototyping Introduction
• Paper prototyping: Getting user data before you code
• In my experience, designers almost never use paper prototyping
in real design projects despite its potentially immense
contribution to creating a high-quality user experience.!
• With a paper prototype, you can user test early design ideas at
an extremely low cost. Doing so lets you fix usability problems
before you waste money implementing something that doesn't
work.
228. Issues to Explore
• App concepts
• Do users understand your app’s central concept?
229. Issues to Explore
• App concepts
• Workflows
• Is the overall navigation clear? Are there too many steps to complete
tasks?!
230. Issues to Explore
• App concepts
• Workflows
• Information organization
• Does the current organization match users’ expectations?
231. Issues to Explore
• App concepts
• Workflows
• Information organization
• Terminology
• Are the labels on tabs, screens, and buttons clear?
232. Issues to Explore
• App concepts
• Workflows
• Information organization
• Terminology
• Additional features
• Over the course of evaluating your app, you may uncover additional
features that users need.
233. Challenges
• Paper prototypes are less suitable for refining low-level
interactions such as transitions, scrolling, and swiping.
• Paper prototypes may also be less useful for certain classes of
apps, such as musical instruments, videos, and games.
234. How to Do it?
• Steps for creating paper prototyping
• Backgrounds
• Screens
• Preparing the controls
235. Steps for Creating Paper Prototyping
• Step 1: Gather materials
• You may prepare the following materials on hand: whiteboard, pencil,
marker, cardboard, removable tape, glue, correction fluid, and scissors.
236. Steps for Creating Paper Prototyping
• Step 1: Gather materials
• Step 2: Determine the form factor
• At some point your designs will have to match the iPhone screen
dimensions—320 x 480 pixels (640 x 960 for iPhone 4)—but paper
prototypes can be less exact.
• Using a larger form factor will make it easier for others to interact with
the design
237. Steps for Creating Paper Prototyping
• Step 1: Gather materials
• Step 2: Determine the form factor
• Step 3: Create the prototype
• Your prototype will include a background, the screens, and the user
interface controls.
• As you create the prototype, be sure your scenarios and application
flowchart are readily available.
238. Backgrounds
• If your prototype is much larger than the iPhone, you may want to
frame your designs with a cutout iPhone made with foam core or
cardboard.
• This frame can help orient participants when usability-testing
your app.
• Alternatively, if your prototype matches the iPhone dimensions,
you can adhere it to the device, potentially making it “feel” closer
to the real thing.
239. Screens
• Your app screens can be hand-drawn or screenshots.
• Hand-drawn sketches tend to elicit high-level conceptual
feedback, whereas screenshots may lead to low-level visual
feedback.
• If possible, stick with one approach, not half hand-drawn
screens and half screenshots.
• A few notable exceptions are photos, maps, and keyboards:
Printing these out will save time, and they’ll work fine when
240. Preparing the Controls
• Tab bar
• Keyboard
• Sliders
• Text entry
• Pickers
• Highlight
• Alerts
• Segmented controls
241. Tab Bar
• Create highlighted and non-highlighted versions of tab states
• Use text if you haven’t decided on the appropriate tab icon.
Paper prototype with a tab bar
242. Keyboard
• You can use hand-drawn keyboard sketches or screenshots.
• It’s not necessary to have the pressed state for each button, but
pay attention to the default colors and special contextual keys
such as those for web and email addresses.
Sample sketch with a keyboard
printout
243. Sliders
• Sliders can be created with a tiny piece of construction paper
folded over a narrow strip of paper.
• If you’re short on time, you can provide verbal feedback as the
user moves a finger back and forth across the slider.
• This verbal approach can also be applied to progress bars (e.g.,
“Downloading 1 of 10”).
Example of a slider
244. Text Entry
• For text entry, participants can write on Post-its or removable
tape.
• Alternatively, they can use a pencil to write directly on the
prototype.
• Be forewarned: Even with good erasing, if participants write too
hard, your next user may see what the previous one wrote.
245. Pickers
• Pickers provide essentially the same function as drop-down lists
on web or desktop applications.
• Given that they can include a large number of items, you may
need a long strip of paper to display all of the options.
• The strip can be folded and tucked away when the user is not
interacting
Example of a time picker
246. Highlight
• Consider creating a highlight cutout that you can move up or
down as the user makes selections.
• Another option is to buy transparent plastic sheets, which come
in a variety of colors.
Example of a highlight
247. Alerts
• Consider using a different background color for your alerts.
• Make sure they don’t completely obscure content that should be
visible underneath
Example of a alert overlay
248. Segmented Controls
• Include different states of segmented controls, which are
typically used for filters or sorts.
• Each state can show a different “segment” of the control
highlighted.
Segmented control example
249. Static Images on Device Prototyping
• Introduction
• How to do it?
• Viewing method
250. Introduction
• Once you have refined your overall concept and flows, you may
want to create screen captures of your designs and display them
on the iPhone.
• If you link the images with “hot spots,” you can offer a more
exploratory user experience since no one needs to play the role
of “computer” while switching out user interface elements.
251. How to Do it?
• To start, you’ll want to create 320 x 480 images of your app
screens.
• Many drawing programs have iPhone templates built into the
software or available for download.
• There are some drawing programs used by iPhone UI designers:
• OmniGraffle
• Fireworks
• Photoshop
• Illustrator
• Sketch
• UXPin
254. Introduction
• Prototypes can be developed using the iPhone SDK within
Interface Builder Storyboard of Xcode IDE.
• While some design professionals may argue that “working code”
is not prototyping, it really depends on the domain and the
prototype complexity.
• For example, paper prototyping would be inadequate for
exploring a musical instrument app.
• In this case, digging into Apple’s Audio Library may be the most
efficient way to experiment and figure out what’s possible.
255. How to Do it?
• Step 1: Create project in Xcode
• Step 2: Design scene interface in Storyboard
• Step 3: Implement transition between scenes and some UI
details of of your app prototyping
• Step 4: Run your app prototyping in iOS simulator
256. Summary
• Before you invest significant engineering resources into the
implementation of your design, it’s a really good idea to create
prototypes for user testing.
• You can get some useful feedback from testing wireframes, but
their sparseness may mislead testers.
• The easiest way to create a credible prototype is to use a
storyboard-based Xcode template to build a basic app
• Then, install the prototype on a device so that your testers can
have as realistic an experience as possible.
• You must make design adjustments in response to feedback.
• With a short turnaround time, you should be able to test several
iterations of your prototype before you solidify your design and
commit resources to its implementation
257. • What is usability testing?
• Why usability testing?
!
!
4 Usability Testing App Concepts
258. What is Usability Testing?
• Usability testing is an umbrella term for a variety of methods that
involve observing users as they interact with a product, typically
with a set of predefined tasks
• Validate internally:
• Purpose: get quick and frequent feedback from executive and team
members
• Tools: whiteboard + pinboard, daily scrum, internal survey, meeting
minutes
• Test externally:
• Purpose: Meet with customers, find niche group of target users
259. Why Usability Testing?
• Help resolve known design issues
• Uncover unknown design issues
• Set a baseline for future study
• Gather information for the next release
• Get stakeholder buy-in
260. • Usability testing on paper versions of wireframes or sketches that
users can simulate slicks and talk through their thoughts and
decisions.
Paper Prototype Usability Testing
• Key benefits:
• Fastest and cheapest way to validate
ideas/assumptions
• Results can be fed back into the design
process immediately
• You can do this at any time you are not
sure what is the best UI for a specific
problem
261. Case Study: From Desktop to iOS
• From desktop to iOS
• From website to iOS
262. From Desktop to iOS
• Keynote on iPad
• Mail on iPhone
• Web content in iOS
263. Keynote on iPad
• Keynote on the desktop is a powerful, flexible app for creating
world-class slide presentations.
• Makes Keynote on iPad with a user experience that:
• Focuses on the user’s content
• Reduces complexity without diluting capability
• Provides shortcuts that empower and delight
• Adapts familiar hallmarks of the desktop experience
• Provides feedback and communication via eloquent animation
265. Keynote on iPad
• A streamlined toolbar: Only seven items are in the toolbar, but
they give users consistent access to all the functions and tools
they need to create their content.
• A simplified, prioritized inspector that responds to the user’s
focus. The Keynote on iPad inspector automatically contains the
tools and attributes people need to modify the selected object.
266. Keynote on iPad
• Lots of prebuilt style collections. People can easily change the
look and feel of objects such as charts and tables by taking
advantage of the prebuilt styles.
• Direct manipulation of content, enriched with meaningful
animation. In Keynote on iPad, a user drags a slide to a new
position, twists an object to rotate it, and taps an image to select
it.
267. Mail on iPhone
• Mail is one of the most highly visible, well-used, and appreciated
apps in OS X.
• It is also a very powerful program that allows users to create,
receive,, and store email, track events, create notes and
invitations.
• Mail on iPhone delivers this condensed functionality in a UI
tailored for the mobile experience that includes:
• A streamlined appearance that puts people’s content front and center
• Different views designed to facilitate different tasks
• An intuitive information structure that scales effortlessly
• Powerful editing and organizing tools that are available when they’re
needed
269. Mail on iPhone
• Distinct, highly focused screens. Each screen displays one
aspect of the Mail experience: account list, mailbox list, message
list, message view, and composition view.
270. Mail on iPhone
• Easy, predictable navigation: making one tap per screen, people
drill down from the general (the list of accounts) to the specific (a
message).
• Simple, tappable controls, available when needed: because
composing a message and checking for new email are primary
actions people might want to take in any context, Mail on iPhone
makes them accessible in multiple screens.
• Different types of feedback for different tasks: when people
delete a message, it animates into the trash icon.
271. Web Content in iOS
• Safari on iOS provides a preeminent mobile web-viewing
experience on iOS devices. People appreciate the crisp text and
sharp images and the ability to adjust their view by rotating the
device or pinching and tapping the screen.
• The most successful websites typically:!
• Set the viewport appropriately for the device, if the page width needs to
match the device width
• Avoid CSS fixed positioning, so that content does not move offscreen
when users zoom or pan the page
• Enable a touch-based UI that does not rely on pointer-based
interactions
272. From Website to iOS
• Muachung on iPhone
• Zaloza on iPhone
• HDViet on iPad
279. Documentation
Concept of UX Design
http://en.wikipedia.org/wiki/User_experience_design
http://www-01.ibm.com/software/ucd/designconcepts/whatisUXD.html
Personas
http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
Mobile Patterns
http://mobile-patterns.com
http://uxarchive.com
Paper Prototyping
http://www.nngroup.com/articles/paper-prototyping/
Cocoa Application Competencies for iOS
https://developer.apple.com/library/ios/documentation/general/conceptual/Devpedia-CocoaApp/
Window.html
Auto Layout Guide
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/
Introduction/Introduction.html
UIKit User Interface Catalog
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/
