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.
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UI Engineering - Rebooted
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
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
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
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
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
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