1. Understanding UX
as Developer
Faizal Rahman Hakim
https://dribbble.com/faizalrahman27

2. What is UX?
First thing first

3. Sederhananya seperti ini..

4. Jika dianalogikan, berikut ini adalah suatu data/
konten yang berguna untuk user..
dan meja makan adalah suatu platform yang
menjadi wadah bagi user untuk mengaksesnya

5. Kemudian, diberikan kondisi seperti ini

6. Informational Architecture do ..
Sendok
Pisau
PiringSerbet
Garpu
Gelas

7. Use Experience do ..

8. UX =
Tampilan yang Cantik
/

9. UX = Tampilan
(View)
+
Performance
(Model, Controller, etc)
+
Usability
+
Etc.
Developer’s
Touchpoint

10. “UX is intangible design of a
strategy that brings us to a
solution”
http://www.uxisnotui.com

11. UX adalah suatu cara
menyampaikan manfaat yang
dimiliki suatu platform kepada
user.
Bisa dikatakan..

12. Web Development Layer
User Interface
Technical Scope
User Experience
Business Strategy

13. Feasibility
Desirability
Viability
(Tech) (Business)
(Human)
UX
Design Thinking
Approach
as a Solution

14. UX is about the Navigation

15. Good UX has Good Navigation

16. Good UX itu yang
mudah digunakan
Yang mudah digunakan itu
yang sudah biasa
Resistant to Innovation

17. tiket.com vs traveloka.com
Old Fashioned
Sidebar Search

18. tiket.com vs traveloka.com
Try new things,
center search

19. tiket.com now become center search

20. Walaupun yang mudah
digunakan itu
yang sudah biasa
Belum tentu yang tidak biasa
itu tidak baik untuk user.
“UX never limit innovation”

21. Why UX important?

22. Developer spend 50% of their time
fixing avoidable Issue
http://vitamintalent.com/ux-statistic/

23. Every $1 invested in UX
returns up to $100
http://vitamintalent.com/ux-statistic/

24. 5 Guiding Principle
for User Experience
— Whitney Hess

25. • Understand the problem
• Don’t hurt anyone
• Make things simple and intuitive
• Acknowledge the user is not like you
• Have empathy

26. 7 Principles of
Software Development
— David Hooker

27. • The Reason It All Exist
• KISS (Keep It Simple Stup*d)
• Maintain The Vision
• What You Produce, Other Will Consume
• Be Open to The Future
• Plan ahead for Reuse
• Think!

28. • Understand the problem
• Don’t hurt anyone
• Make things simple and intuitive
• Acknowledge the user is not like you
• Have empathy
• The Reason It All Exist
• KISS (Keep It Simple Stup*d)
• Maintain The Vision
• What You Produce, Other Will
Consume
• Be Open to The Future
• Plan ahead for Reuse
• Think!
Same objective in some case

29. Why UX not UI?

30. UX
fitur, user flow, dan context
suatu product
Proses update status Facebook,
Tweeting, Liking, Comment,
Peletakan Shopping Cart, dll

31. UI
visualisasi, content
Penentuan ukuran gambar, background,
warna, judul, paragraf, dll

32. UI Estetika, Visualisasi
UX Konsep dasar dari suatu software
yang menyangkut fitur, context, dan
user flow

33. UX menentukan apa yang
akan dihasilkan oleh UI

34. Wireframe Mockup

35. Tentunya, dalam menentukan sesuatu,
UX harus mempertimbangkan Feasibility
secara Teknis

36. Data Flow Diagram, ERD,
Usecase, Usecase Spesification,
Software Requirment Document
Familiar with this?

37. Great UX
understand development
process

38. Efficient UX
have programming knowledge

39. So, how do we start?
Developer with UX Knowledge

40. Change mindset
1

41. Bagaimana mengorganisasikan fitur ini
untuk menghasilkan sistem yang efficient?
From
1

42. Bagaimana mengorganisasikan fitur ini
agar efficient secara penggunaan?
To
1
• Don’t hurt anyone
• Make things simple and intuitive

43. Know your users
2
• Have empathy

44. Do a lot prototyping
3
• Understand the problem
• Acknowledge the user is not like you

45. Sketch
Build Adjust
Test
3

46. Prototyping
Low fidelity High fidelity
Mockup + ToolsWireframe + Tools
3

47. Common Tools
3
Use Code

48. Non-Programming Tools
Offline Online
Free
3
marvelapp invisionappbalsamiq

49. Get started
Change mindset
Know your users
Sketch, Build, Test, Adjust

50. Happy users mean a happier you.
Good UX mean happy users.
https://vitamintalent.com/ux-statistic