Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
UI ENGINEERING Rebooted
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 1
UDAY M. SHANKAR Bangalore 2010
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 2
• Prototyping at Yahoo! India
• 11 years in the UX/UI space
• Twitter - @udayms • LinkedIn – linkedin.com/in/udayms
• Facebook – facebook.com/udayms
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
What happened?
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 3
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
REMEMBER THE OLD WAYS OF DESIGN?
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 4
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
THINK OF THE NEW WAYS OF DESIGN
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 5
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
DESIGN IS EVOLVING. LET’S ADAPT
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 6
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
AS DESIGNERS, WE DESIGN UI
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 7
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
WHAT WE WANT USERS TO SEE
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 8
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
WHAT USERS ACTUALLY SEE
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 9
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
AND SOMETIMES, IT GETS SCARY
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 10
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
DON’T DESIGN UI. SOLVE PROBLEMS.
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 11
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
How to solve those problems?
Start with a Prototype
Designers to get more tech-savvy
Understand that each application has a personality of its own
And…Follow 6 simple principles
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 12
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
1. Desktop or Browser
Many advantages on both fronts
Old motivators for moving to web is irrelevant in the context of RIAs
Don’t let legacy and current
trends decide this for you
Do it for the right reasons
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 13
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
2. Interact with user
Always keep user informed of what the software is doing
Display ‘information’, ‘error’ with appropriate icons and colors
Avoid ‘confirmation’ and ‘warning’
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 14
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
3. Forgiving UI
Do not punish the user for using your UI
Provide rollback wherever possible
Prevent user from making
mistakes rather than throwing warnings/errors later
Allow ‘reset’ to last known good state
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 15
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
4. UI Architecture
Architecture is not LAYOUT
De-Couple UI completely from backend
UI technologies are short-lived
Architect differently for web and desktop
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 16
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
5. Design Right
Many RIA designers have a tendency to get carried away
with the cool effects that’s
possible using RIA technologies
Possibility is not equal to Usability
Cool is not equal to Usable
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 17
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
6. Accessibility, i18n, l10n
Think about it in the beginning
Think about it while designing
Think about it while skinning
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 18
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
WOWS & WTFS
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 19
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
If you had to use this daily!
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 20
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Stop bugging me
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 21
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Talk sense or shut up!
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 22
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Simple is not enough
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 23
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Too much power in user’s hand
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 24
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Forgiving UI
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 25
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
WOWS & WTFS: REAL WORLD
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 26
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
What Sme is it? Bad Time!
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 27
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
What would you do?
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 28
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Why analog?
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 29
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Lack of usability evaluaSon
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 30
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Keep it clear
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 31
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Remember
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 32
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Design for users. Not for geeks!
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 33
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
REALITY CHECK
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 34
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
BROWSER WARS ARE BACK!
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 35
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
HTML5 / CSS3 ARE HERE TO STAY
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 36
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
THINK SOCIAL
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 37
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com UI Engineering is
NOT about making screens
‘look’ better!
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 38
Adobe Flash Pla-orm Summit 2010, India. www.adobesummit.com
Email [email protected] Blog udayms.wordpress.com
Twitter @udayms flexed.wordpress.com References Google, Slideshare, Flickr
QuesSons?
August 27, 2010 udayms.wordpress.com | @udayms | linkedin.com/in/udayms | facebook.com/udayms 39
Top Related