A brief look at History of UI, the present state and What's Next.

1. UI/UX
NOW & NEXT

2. • Sr. UX Designer at
Continental Automotive
• 3rd Generation Indian Chinese
• Self Taught UX Designer
• Impulsive Hoarder of Ideas!
ABOUT ME

3. • The Evolution of UI and UI Tools
• The Current state of UI/UX
• A peak into the Future
What’s on the table
TODAY

4. Before the
Dent in the Universe…

5. CUI GUI
Direct Manipulation

6. Early Mobile Phones

7. And then this happened…

9. New Interaction. New UI Paradigm.
Birth of Skeuomorphic UI.

10. A Metro Turnaround

11. And then everything went Flat

12. Google took a step back and
Material Design was born

14. Microsoft took it a notch higher with
Fluent Design

16. Material Design Fluent Design

17. Current UI Design
• Bigger, Bolder, Blacker Headlines.
• Triple your White Space.
• Simpler more universal icons
• Reduction of color

18. The evolution of UI Design
was followed by
the Evolutionof UI/UXTool

19. Photoshop?
That is for editing Photos, duh!

20. From UI to UX Tools
DESIGN
WIREFRAME
PROTOTYPING
USER TESTING
AXURE BALSAMIQ ADOBE COMP
SKETCH XD FIGMA
INVISION
XD FIGMA
INVISION APP OPTIMIZELY
OPTIMAL
WORKSHOP
UX
UI
USER RESEARCH
OPTIMAL
WORKSHOP
APPSEE USERVOICE
PROTOPIE

21. The UI/UX Tool itself
extended and adapted…

22. Designs are
Collaborative,
Scalable &
Customisable

24. Beside Tap,
Tools now support even Voice.

26. We can even plug in Live Data

27. Rising Trend in UI/UX
27

28. 28
• Streamline User-flow
• Keep the User Engaged
• Add User Delight
UX Trend
Anticipatory Design

29. 29
UX Trend
Multi Gesture (On-Screen)

31. 31
UX Trend
Multi Gesture (Off-Screen)

33. 1. GPS Feature – to auto-select current location
2. Camera
3. Accelerometer and gyroscope
4. Mic
5. Fingerprint Sensor
33
UX Trend
Augments Usability via Device Capability

34. OK Google!
1. Voice User Interface
2. Chatbots
UX Trend
Conversational

36. 36
UX Trend
Multi-Device – Seamless Jump

37. 37
UX Trend
Multi-Device – Using one as an Extension to another

38. 38
A peak into the Future

39. 39
The age of
Computational Design…
If the human can describe the principles driving the design
in a form that the computer can understand – i.e. as an
algorithm – then the computer can begin to take on a much
larger role in the design process, becoming not just a
recipient of data but also a generator of it, creating the
design representation from the rules the designer has set.
What is Computational Design? Paul Jeffries

40. Computational Design
The Alibaba’s Auto Designer

42. Computational Design
Design Idea Generator

44. Computational Design
Perhaps Design an entire Website?

46. 46
But wait….
Before we forget
who we are REALLY making all these Products for.

47. 47
Humane Design
Inclusive Design

48. 48
Humane Design
Un-Hook User

49. 49
Humane Design
Transparency
Right to Know Data Transparency

50. 50
Wrapping Up!

51. 51
Q&A

52. roberthsu.design
LET’S
CONNECT!

53. 謝謝Thank You!
ধন্যবাদ
धन्यवाद