I've given this talk as a guest lecturer at Bogazici University Software Design Process graduate class (SWE530) in Spring 2015. This talk introduces key concepts of user experience design to software engineering graduate students and outlines the process of integrating design and engineering. Starting from ideation, it goes through all the steps including but not limited to user research, sketching, prototyping, user testing, design validation and iteration. Hand on best practices are also shared as case studies part of this presenation.

1. supercharge your
application with
the best ux practices
Gercek Karakus
Istanbul, April 2015
SWE530 - Software Design Process
Bogazici University

3. front-end engineers?
back-end engineers?
ios/android engineers?
engineering managers?

6. ux design
the process of enhancing customer satisfaction
and loyalty by improving the ease of use and
pleasure provided in the interaction between
the customer and the product.

13. everything on the web is a form

15. validate
to bring user on your side

16. meaningful error messages

17. huge drop-off after
front-end validation

18. test different validation
messages

19. do your homework first

20. validating phone numbers
remove non-digit characters and reformat in the backend

21. validating email fields
• capture common mistakes in email fields
• ie. gnail.com, yhoo.com …

22. Use HTML5 input types
to trigger appropriate keyboard on mobile devices

23. <input type=“email” name=“email” />

24. <input type=“url” name=“url” />

25. <input type=“tel” name=“zipcode” />
On Android, both “number” and “tel” brings up the number pad keyboard

26. auto-complete common fields

27. turn off auto-capitalize
when designing form fields on email, password & url

28. graceful degradation
• build for now and future
• don’t force yourself to build features for old browsers
• make it work and move on

30. auto-login from emails

33. be careful!
• people forward email
• don’t let free riders in…
• implement sandbox mode & limit user access

34. in-place editing

37. responsive web design

39. adaptability matters
• cross browser
• cross device
• easier maintenance

40. flexible images

42. http://www.slideshare.net/AaronGustafson/intro-to-adaptive-web-design-chadev-lunch
fluid grids everywhere

43. mobile first breakpoints

45. readability matters

46. characters per line
• 60-75 characters/line on larger screens
• 35-40 characters/line on mobile

47. responsive typography
http://ia.net/blog/responsive-typography-the-basics/

48. http://typecast.com/blog/a-more-modern-scale-for-web-typography
adapt line-height and font-size

49. no more image icons!

50. life is happier with font icons

51. • crisp & clear iconography
• single http request
• easy maintenance
• vector-based (rescale, recolor or animate with no
hassle)
font icons

54. perceived performance
vs
actual performance

55. build
single page web apps

56. make it feel fast
• pre-catch views on the front-end
• cache in memory for fast access
• separate content and chrome

57. http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
add touch states to your buttons

58. enable momentum scrolling

60. avoid spinners when possible
• animate on waits shorter than 300ms
• display chrome instead of a spinner
• use short animations to distract the user from the
wait — instead of staring at a spinner they’re simply
waiting for a short animation to finish.

62. https://medium.com/ui-ux-articles/3d1b0a9b810e
Improve the experience with animations

63. Improve the experience with animations

64. smooth animations
• 60fps
• bust janky animations with devtools
• pre-load views
• contextual transitions
http://jankfree.org/

65. Performing Actions Optimistically
http://www.lukew.com/ff/entry.asp?1759

67. respond to user interaction in
less than 100 ms

68. if it absolutely has to take longer than 100ms,
it should definitely respond within 1s.

69. should make you feel bad
anything that takes longer than 1 second

70. Take Advantage of Natural
Gestures
• Side-to-Side Swiping (Photo Galleries)
• Pull-to-Refresh
• Long Press
• Pinch-Zoom

71. increasing conversion

72. auto-fill whenever possible
One of the worst things from an experience and conversion stand point
is to ask people for data that they have already provided in the past,
repeatedly over and over again.

73. suggest continuity

74. don’t ever ask for the information
that you don’t really need

75. building
the billion dollar
landing page

77. focusing on conversion
• first impression
~3 seconds attention span
• responsive
needs to adapt all devices
• high performance
small footprint and fast loading time

79. • width
• height
• pixel density
adapt to viewport

80. all the roads should
lead users to the same goal

82. design validation

83. build funnels

84. identify drop-offs

85. https://mixpanel.com/report/402623/funnels/#view/668567/from_date:-127,to_date:-67

86. iterate your design

87. rinse & repeat

88. always track form interactions
• formInit
• formSubmit
• formSuccess
• formError

90. case study: a/b testing
Hypothesis
When users click on images or links in the content
section, we were displaying the modal with the
contact form. We thought we can personalize each
modal depending on how users triggered the modal
and display related information to them in order to
build more trust.
https://docs.google.com/a/redbeacon.com/document/d/1Ab6fvHlPfhhpoOggqGVAceyyL_SlOJOVO6qDqUr7C8o/
edit#heading=h.r64h2lswjsr8

91. the design sprint

92. five simple steps
• Ideation
• Sketching
• Deciding
• Prototyping
• User Testing

93. monday: unpack
• On the first day of the sprint, your team will
“unpack” everything they know. Expertise and
knowledge on most teams is asymmetrical: Sales
knows things engineering doesn’t, customer
support knows things design doesn’t, and so on.
• We’ll explain how to draw insights from the team
together, create a simple user story, set the
scope for the week, and take useful notes as a
team.

94. tuesday: sketch
• During Sketch day, your team will work individually to
draw detailed solutions on paper. As you sketch, everyone
works separately to ensure maximum detail and depth
with minimum groupthink.
• By breaking it down into four discrete steps (Notes, Mind
Map, Crazy 8s, and Storyboard), we show you how CEOs,
engineers, and sales folk alike can contribute their ideas
effectively.
• After sketching, you’ll use a structured critique and
weighted voting to select the best ideas from the field of
possibilities.

95. wednesday: decide
• By Wednesday, you’ll have over a dozen solutions
to choose from. That’s great, but it’s also a problem,
because you can’t prototype and test a dozen
solutions. You’ll have to narrow down and make
tough decisions.
• To prepare for Thursday, you’ll draw a storyboard,
which serves as a blueprint of your forthcoming
prototype. Meanwhile, it’s time to select research
participants and get to work planning Friday’s
interviews.

96. thursday: prototype
• You’ll spend Thursday in the flow, being ridiculously
productive. We show you our systematic plan for
doing the impossible: build an entire realistic-
looking prototype in just eight hours.
• Like George Clooney in Ocean’s Eleven, you’ll
gather a team of experts, assign roles, and put
your plan into motion. And just like in the movie
(sorry, spoiler alert), you’ll get the job done and still
have time to enjoy your evening.

97. friday: test
• On Friday, you’ll show your prototype to real customers in
1-on-1 interviews. We show you how to make sense of
what you observe, taking notes as a team and finding
patterns in real time. By the end of the day, your ideas
have all been exposed to oxygen — some will be smash
hits, while others will meet an early end.
• Obviously, when a risky idea succeeds, it’s a fantastic
payoff. But it’s actually those epic failures which, while
painful to watch, provide the greatest return on investment.
When a prototype flops, it means we’ve spotted critical
flaws after only five days of work. It’s learning the hard
way — without the “hard way.”

98. build for future!

99. `
http://www.slideshare.net/jamesgpearce/html5-and-the-dawn-of-rich-mobile-web-applications-pt-1

104. Help people. Build solutions. Work passionately. Change an industry.

105. thank you!
follow me on twitter: @gercheq
gercekk@gmail.com