The Web has changed. UI has changed. User expectations have changed. It is time to relook long believed UI development philosophies and principles. Starting from laying out the screen to porting it across platforms UI development has completely changed in the context of RIA technologies like Flex. This session looks at some of the most important factors UI developers have to consider when developing RIA UIs. I have used images, content, examples liberally from the open web. Thanks to all for those.

1. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
UI ENGINEERING Rebooted
UDAY M. SHANKAR
Bangalore 2010
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
1

2. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
• Prototyping at Yahoo! India
• 11 years in the UX/UI space
• Twitter - @udayms
• LinkedIn – linkedin.com/in/udayms
• Facebook – facebook.com/udayms
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
2

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Start with a Prototype
How
to
solve
Designers to get more tech-savvy
those
Understand that each application has a
problems?
personality of its own
And…Follow 6 simple principles
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
12

13. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Many advantages on both fronts
Old motivators for moving to web is irrelevant in
1.
the context of RIAs
Desktop
or
Don’t let legacy and current
Browser
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

14. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Always keep user informed of what the software
is doing
2.
Display ‘information’, ‘error’ with appropriate
Interact
with
icons and colors
user
Avoid ‘confirmation’ and ‘warning’
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
14

15. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Do not punish the user for
using your UI
Provide rollback wherever possible
3.
Forgiving
UI
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

16. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Architecture is not LAYOUT
4.
De-Couple UI completely from backend
UI
UI technologies are short-lived
Architecture
Architect differently for web
and desktop
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
16

17. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Many RIA designers have a
tendency to get carried away
with the cool effects that’s
possible using RIA technologies
5.
Design
Right
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

18. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
Think about it in the beginning
6.
Think about it while designing
Accessibility,
i18n,
l10n
Think about it while skinning
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
18

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. Adobe
Flash
Pla-orm
Summit
2010,
India.
UI Engineering is
www.adobesummit.com
NOT about
making screens
‘look’ better!
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
38

39. Adobe
Flash
Pla-orm
Summit
2010,
India.
www.adobesummit.com
QuesSons?
Email udayms@gmail.com
Blog udayms.wordpress.com
Twitter @udayms
flexed.wordpress.com
References Google, Slideshare, Flickr
August
27,
2010
udayms.wordpress.com
|
@udayms
|
linkedin.com/in/udayms
|
facebook.com/udayms
39