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
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
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
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
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
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
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
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
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
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
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
Make it easy for users to recover from mistakes • autosave • undo • informative error messages • unobstrusive reminder/warning Saturday, 12 January, 13
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
Adaptive UI • providing different UI to different type of users. • help user advances from novice, intermediate to advance level. Saturday, 12 January, 13
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
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
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
alvinwoon
tacck
shimap_sampo
yumayabe
hikiroku
yuya4
moritama1515
suzukahr
trycycle
oracle4engineer
takemikami
forcia_dev_pr
philhawksworth
hatefulcrawdad
maggiecrowley
jacobian
marcduiker
zakiwarfel
caitiem20
akmur
lynnandtonic
geoffreycrofte
chrislema
addyosmani