Advanced techniques for
designing web app interfaces
Alvin Woon
Design Lead, Plurk
Saturday, 12 January, 13
Slide 2
Slide 2 text
We are designing a web
application, not a promotion/
marketing website.
Goal is to help user gets thing done
Saturday, 12 January, 13
Slide 3
Slide 3 text
Steps before actual design
Saturday, 12 January, 13
Slide 4
Slide 4 text
Personas
a summary representation of the UI's intended users,
often described as real people.
- To understand personas and its importance, we have
to understand the meaning of end goals.
- End goal is the most significant factors in determining
the overall product experience.
Saturday, 12 January, 13
Slide 5
Slide 5 text
what are end goals?
• Clear my desk before I leave for home.
• Make good business decisions based on my data.
• Find problems proactively before they become crit
ical.
UX practitioners must translate end goals into a
product’s behaviors, tasks, look, and feel. Persona
helps humanize the process in doing so. http://
www.uxmatters.com
3 most important thing in personas
creation: profile, scenario and avatar
Saturday, 12 January, 13
Slide 6
Slide 6 text
Saturday, 12 January, 13
Slide 7
Slide 7 text
Saturday, 12 January, 13
Slide 8
Slide 8 text
Saturday, 12 January, 13
Slide 9
Slide 9 text
but...
- inaccurate/biased pesonas lead to fictional UI
trying to help fictional users reach their fictional
end goals
- interview real people, don't assume you know
what a teenage girl/60 grandpa wants.
- using personas when designing for 'everyone'
risk alienating certain type of users (think social
site)
Saturday, 12 January, 13
Slide 10
Slide 10 text
Card sorting
Saturday, 12 January, 13
Slide 11
Slide 11 text
in other words... card sorting is useful in
grouping different, scattered content into
Saturday, 12 January, 13
Slide 12
Slide 12 text
Saturday, 12 January, 13
Slide 13
Slide 13 text
Saturday, 12 January, 13
Slide 14
Slide 14 text
Wireframing
• establish consensus of ideas between
various stakeholders
• designer and developer know where
'things at'
• easier to change wireframe on the fly
then actual pixel-perfect mockup
• more important in this ajax era - more
quick screens to show the state of
things.
Saturday, 12 January, 13
Slide 15
Slide 15 text
seth - subimage llc
Saturday, 12 January, 13
Slide 16
Slide 16 text
Saturday, 12 January, 13
Slide 17
Slide 17 text
Wireframe software
• axure, gliffy (professional, expensive,
popular among UX in big corporations.
• DENIM (by University of Washington,
open source, free)
• Alvin's favorite - pencil and paper :-)
Saturday, 12 January, 13
Slide 18
Slide 18 text
Task modeling and user flows
- if you design ten states/pages
for a UI component, how does an engineer know the c
onditions under which each of the ten states appears?
- task flows = diagram (flowcharts or inter-linked
components) that shows the relationship between
components of various user interactions for an
application.
Saturday, 12 January, 13
Slide 19
Slide 19 text
Saturday, 12 January, 13
Slide 20
Slide 20 text
Saturday, 12 January, 13
Slide 21
Slide 21 text
Saturday, 12 January, 13
Slide 22
Slide 22 text
Saturday, 12 January, 13
Slide 23
Slide 23 text
Saturday, 12 January, 13
Slide 24
Slide 24 text
Paper prototyping
- prototyping interface using paper-based
product (DUH!)
- encourage fast iterations: you can switch and
sketch and erase with apparent ease
- photoshop has layers. In PP, you can have
many papers/cards illustrating different
interaction process.
- allow users participation by drawing on
mocks.
Saturday, 12 January, 13
Slide 25
Slide 25 text
Saturday, 12 January, 13
Slide 26
Slide 26 text
if you are bad at drawing...
there are some ready-to-print
design stencils available for you to
mix and match.
- Yahoo! Design Stencil
- http://www.infodesign.com.au/
usabilityresources/design/
paperprototypinggraphics.asp
Saturday, 12 January, 13
Slide 27
Slide 27 text
Saturday, 12 January, 13
Slide 28
Slide 28 text
Saturday, 12 January, 13
Slide 29
Slide 29 text
Saturday, 12 January, 13
Slide 30
Slide 30 text
but...
- be careful when prototyping AJAXy interface
with paper. Hard to communicate the concept of
'loading time' in paper.
- experimental navigation structure such as
timeline, complex dropdown and etc are hard to
illustrate via drawing.
- localization, RTL interface
Saturday, 12 January, 13
Slide 31
Slide 31 text
Responsive UI
• speed is the biggest user
experience improvement we can
provide to users
• all of the things I'm going to
present today will be useless if
your web application is slow
Saturday, 12 January, 13
Slide 32
Slide 32 text
Clear navigation
• use existing design pattern
• avoid dropdown whenever
possible
• breadcrumb is overrated (undo, proper
support of back button is more important)
• use card sorting to organize your
Saturday, 12 January, 13
Slide 33
Slide 33 text
Make it easy for users to
recover from mistakes
• autosave
• undo
• informative error messages
• unobstrusive reminder/warning
Saturday, 12 January, 13
Slide 34
Slide 34 text
Choose a good default for
user
• many choices = more time to make
decisions. Clutter, too many options.
Hick's Law.
• your app might fail because of lack of
features, but never because of lack of UI
and execution choices.
Saturday, 12 January, 13
Slide 35
Slide 35 text
Saturday, 12 January, 13
Slide 36
Slide 36 text
Adaptive UI
• providing different UI to different
type of users.
• help user advances from novice,
intermediate to advance level.
Saturday, 12 January, 13
Slide 37
Slide 37 text
Saturday, 12 January, 13
Slide 38
Slide 38 text
Saturday, 12 January, 13
Slide 39
Slide 39 text
Reuse existing design
elements
• review current design components.
reuse when possible
• try to stick with existing color scheme,
typography, spacing
• consistency in design = design elements
Saturday, 12 January, 13
Slide 40
Slide 40 text
Effective color combination
• emphasize on contrast, whitespace, good
typography and consistent alignment
• learn about the fundamentals of color theory.
• if you don't know what color to use - use light blue/
grey. Color blind-friendly, universal and culturally
peaceful.
Saturday, 12 January, 13
conservative color scheme
Saturday, 12 January, 13
Slide 45
Slide 45 text
explosive color scheme
Saturday, 12 January, 13
Slide 46
Slide 46 text
color blindness
Saturday, 12 January, 13
Slide 47
Slide 47 text
Post launch: Study your users
• biggest social sites dedicate hundreds
of servers for analytic purposes to study
users cognitive style when using their
site.
• forget pageviews, visits. learn to dig
deep: entrance page, time on page,
Saturday, 12 January, 13
Slide 48
Slide 48 text
Saturday, 12 January, 13
Slide 49
Slide 49 text
Keep iterating...
• AB testing
• Use your analytic data and set a
goal
• everything can be improved, let
Saturday, 12 January, 13