Understanding UI design

1. Understanding user interface design July 15, 2015Johan Ronsse, UX Talk Tokyo

2. These slides are from a talk given at UX Talk in Tokyo on July 15th. A video of this talk is available at  https://www.youtube.com/watch?v=ybwsW_aoH18 . These slides contain some notes, but not every part of the presentation has notes. Some things that get mentioned during the presentation are referenced in the last slides. These last slides also contain a list of resources.

3. You will ﬁnd yellow boxes like this one on the slides which contain the notes for that slide.

4. 1. Introduction 2. The work of a UI designer 3. Keeping up to date and improving your skillset 4. UI discussion

5. 1. Introduction 2. The work of a UI designer 3. Keeping up to date and improving your skillset 4. UI discussion There are four sections: introduction to Mono, the work of a UI designer, how to keep up to date and to keep improving your skillset, what to make of various sources and ﬁnally, if time allows, there is some UI discussion that digs deeper into speciﬁc topics.

6. 1. Introduction July 15, 2015Johan Ronsse, UX Talk Tokyo

7. Johan Ronsse My name is Johan, and I run a company called Mono.

8. Mono is a user interface design company

9. Opnameinformatie Patiëntinformatie Nieuwe klacht 4 dagen geleden LS Last van buikproblemen Bestaande klachten houden aan =4 dagen> Nieuwe klacht Gisteren LS Hoofdpijn Ziektebeeld Aantal dagen in ziekenhuis Opgenomen voor Verantwoordelijke dokter Darminfectie Dr. Jacques De Ridder Medicijnen Onderzoeken Naam Frequentie Wanneer na het eten na het avondeten Enterol 250mg 2 keer per dag Medicijn Y 1 keer per dag NaamDatum Arts Rémy Naessens Gastrointestinaal onderzoek 2 dagen geleden Rémy Naessens Binnen 4 u Gastrointestinaal onderzoek 4 Toevoegen 52 jaar, man Kamer 3W120 Dennis Raboot Volgende patiëntVorige patiënt Menu Patiënt zoeken Lieve SpoorenMijn ronde

10. Opnameinformatie Patiëntinformatie Nieuwe klacht 4 dagen geleden LS Last van buikproblemen Bestaande klachten houden aan =4 dagen> Nieuwe klacht Gisteren LS Hoofdpijn Ziektebeeld Aantal dagen in ziekenhuis Opgenomen voor Verantwoordelijke dokter Darminfectie Dr. Jacques De Ridder Medicijnen Onderzoeken Naam Frequentie Wanneer na het eten na het avondeten Enterol 250mg 2 keer per dag Medicijn Y 1 keer per dag NaamDatum Arts Rémy Naessens Gastrointestinaal onderzoek 2 dagen geleden Rémy Naessens Binnen 4 u Gastrointestinaal onderzoek 4 Toevoegen 52 jaar, man Kamer 3W120 Dennis Raboot Volgende patiëntVorige patiënt Menu Patiënt zoeken Lieve SpoorenMijn ronde We design user interfaces for applications, for example this medical interface to help nurses in hospitals to do their job.

11. This is a user interface design for an application to use your phone or tablet to display music notation.

12. We are moving towards more design for work for embedded computers. Think about ATMs and ticket vending machines, that’s also the kind of work we do.

13. JohanXavier Jan

14. JohanXavier Jan We are 3 people: Xavier, Jan and me.

15. Xavier Johan Jan At the moment we are a bit dispersed as I am in Japan and the other guys are in Belgium.

17. + However, we ﬁnd that the remote work is not a big problem these days. In fact, the timezone diﬀerence sometimes helps us to get things done quicker.

18. 2. The work of a UI designer July 15, 2015Johan Ronsse, UX Talk Tokyo

19. 2. The work of a UI designer July 15, 2015Johan Ronsse, UX Talk Tokyo The ﬁrst part of this presentation is about the kind of work you do as a user interface designer.

20. Design and prototyping work Developer communication Research Client communication

21. Client communication Design and prototyping work Developer communication Research Client communication I ﬁnd that generally you can divide the work you would do as a UI designer into 4 categories. You communicate with the client, you do research… a big part is the design and prototyping work, and you will likely also communicate with the developers about the implementation.

22. • Understanding their problem • Understanding their domain • Becoming knowledgeable their domain and thinking along with the business Client communication

23. • Understanding their problem • Understanding their domain • Becoming knowledgeable their domain and thinking along with the business Client communication The client communication mostly revolves around understanding their problem so you can design a good solution for it. But as you do more and more work for the same client you really start to grasp their domain and you can start thinking along with the business. This is why we like to have long term relationships with our clients.

24. Client communication • Presenting your work • In-person meeting • Screen sharing through Skype • Video presentations • Designs and discussion on Basecamp, Slack

25. Client communication • Presenting your work • In-person meeting • Screen sharing through Skype • Video presentations • Designs and discussion on Basecamp, Slack A big part of being a good designer is being a great communicator, and we present our work in various ways, from in-person meetings to a lot of screen sharing sessions as well as utilising a variety of other communication methods.

26. Client communication • Collaborative: drawing together • Quick sketches and notes while looking at the same “thing” • Reﬁne by yourself • Repeat

27. Client communication • Collaborative: drawing together • Quick sketches and notes while looking at the same “thing” • Reﬁne by yourself • Repeat I ﬁnd that the best way to do work is not the one way street of showing your designs but if possible actually drawing together. What has worked well for me in the past is having Illustrator or some tool you are comfortable with open in a meeting room and making drawings and notes while the stakeholders are watching. They can give comments, and then when you are back at your desk you can revise the whole thing based on the input you got.

28. Slick presentation vs. working demo

29. But, it’s not always possible to make a working demo. I recently started learning more video editing skills and found this is also helpful for UI design. Especially After Eﬀects is great for making advanced interaction design videos.

30. This slide contains a video. A video of this talk is available at  https://www.youtube.com/ watch?v=ybwsW_aoH18 .

31. I’m talking about interaction designs about interacting with 3D space and complex drag and drop actions. There is no way to code that without actually making an implementation so a way to communicate the design is to make a “fake” movie of it ﬁrst. The disadvantage here is that it’s rather time consuming to do.

32. Client communication Design and prototyping work Developer communication Research

33. Client communication Design and prototyping work Developer communication Research As a UI designer you will spend most of your time doing design and prototyping work.

34. Sketches This ranges from the ﬁrst sketches…

35. Wireframes … to extensive wireframes…

36. Opnameinformatie Patiëntinformatie Nieuwe klacht 4 dagen geleden LS Last van buikproblemen Bestaande klachten houden aan =4 dagen> Nieuwe klacht Gisteren LS Hoofdpijn Ziektebeeld Aantal dagen in ziekenhuis Opgenomen voor Verantwoordelijke dokter Darminfectie Dr. Jacques De Ridder Medicijnen Onderzoeken Naam Frequentie Wanneer na het eten na het avondeten Enterol 250mg 2 keer per dag Medicijn Y 1 keer per dag NaamDatum Arts Rémy Naessens Gastrointestinaal onderzoek 2 dagen geleden Rémy Naessens Binnen 4 u Gastrointestinaal onderzoek 4 Toevoegen 52 jaar, man Kamer 3W120 Dennis Raboot Volgende patiëntVorige patiënt Menu Patiënt zoeken Lieve SpoorenMijn ronde Visual design …to the ﬁnal visual design.

37. Design tools

38. Design tools A good UI designer is great at using his or her tools and fantastic at using a computer in general. At Mono, all of us switched to Sketch for UI design. However, Sketch is not so great in terms of vector tools so for icons we often still resort to Illustrator.

39. Adobe recently updated Photoshop with new features, like artboards…

40. … and a UI design view that simpliﬁes the interface. I still have to evaluate it.

41. There is also new competition in the space with Aﬃnity Designer. This is great because before it felt like it took years before there was an evolution in design software.

42. Prototyping

43. Type of prototype • Images chained together (InvisionApp, Flinto, …) • Apple Keynote • Full HTML/CSS prototype • Small UI demo (Codepen)

44. What makes sense as a prototype really depends a lot on the nature of the application. If it’s a web app we prefer to code an HTML/CSS prototype that serves as a baseline to evolve into the ﬁnal UI implementation. We like HTML/CSS prototypes for web app projects because they are closest to the real thing. But when you do this you should be careful you don’t get forced into a front-end developer role. If the app is a native app which is increasingly more common in our work these days, we use tools like Flinto and InvisionApp to chain together a series of images in a clickable prototype. I am hesitant to call it a prototype since it does so much less than our HTML/CSS prototypes.

45. Chaining images together

46. Small UI demos This slide contains a video. A video of this talk is available at  https://www.youtube.com/ watch?v=ybwsW_aoH18 .

47. Fully interactive HTML/CSS prototypes This slide contains a video. A video of this talk is available at  https://www.youtube.com/ watch?v=ybwsW_aoH18 .

48. Design ﬁdelity over time Sketch Wireframe Opnameinformatie Patiëntinformatie Nieuwe klacht 4 dagen geleden LS Last van buikproblemen Bestaande klachten houden aan =4 dagen> Nieuwe klacht Gisteren LS Hoofdpijn Ziektebeeld Aantal dagen in ziekenhuis Opgenomen voor Verantwoordelijke dokter Darminfectie Dr. Jacques De Ridder Medicijnen Onderzoeken Naam Frequentie Wanneer na het eten na het avondeten Enterol 250mg 2 keer per dag Medicijn Y 1 keer per dag NaamDatum Arts Rémy Naessens Gastrointestinaal onderzoek 2 dagen geleden Rémy Naessens Binnen 4 u Gastrointestinaal onderzoek 4 Toevoegen 52 jaar, man Kamer 3W120 Dennis Raboot Volgende patiëntVorige patiënt Menu Patiënt zoeken Lieve SpoorenMijn ronde Visual design Prototype

49. In search of the right tool: Sketch + animation

50. In search of the right tool: Sketch + animation To me, a vector drawing tool that also has animation capabilities would be ideal. It’s ironic that this was what Flash was.

51. 3. Keeping up to date and improving your skillset July 15, 2015Johan Ronsse, UX Talk Tokyo

52. Platform knowledge (Operating systems)

53. Platform knowledge (Operating systems) Most UI designers I know work on Mac but you should have a really good understanding of Windows since that’s probably where most of the people using what you design will be using your software.

54. I feel like you can only truly understand something if you have used it for some time, so to this end I’ve been testing the Windows 10 betas. You can just download them and run them from Parallels on a Mac.

55. I’ve also been putting together a UI kit in Sketch with the common Windows elements for use in design work.

56. On the hardware front I have been testing a Surface Pro 3.

57. There’s some good YouTube videos (Channel: WinBeta) that detail the changes in the user interface.

58. On my todo list is to get a new Android phone to test Android 5 and get to know “Material design” better.

60. It’s supposed to be a design guideline but it reads like an engineering guide… I mean, look at this table which is a chart of which level of elevation every UI element has.

61. There’s even the same thing in visual form. Isn’t it obvious that a dialog is above a navigation drawer, and that the content is below that?

62. Google is really overcomplicating things on their material design website.

63. And then they have this website called Google Design…

64. …where there are videos on how to use colors.

65. It is full of marketing speak like “there are no wrong colors” and things to make people feel like they too can design an app.

66. Google as a design player?

67. Google is trying to up its game as a design player; I understand their motivation to do so. The strategy to provide a good baseline default design for applications that is baked in the OS with good guidelines for developers is indisputably a good thing for applications on Android. However, reading this resource as an experienced designer I don’t feel respected, rather oﬀended.

68. Compare Google’s “Design guide” to Apple’s Human Interface Guide which is a serious book that encourages you do the right things in design. It details both OSX…

69. … and iOS.

70. Apple has been doing this for ages, this is a human interface document from 1992 documenting the interface of Mac OS 7. (Ssystem 7)

71. Reading this kind of document is pure interface design gold.

72. On the topic of staying up to date in terms of platform knowledge, Apple recently opened a public beta testing program for iOS9. So you can test the upcoming iOS9 as well as the new version of OSX.

73. I mostly talked about Google’s Material Design and Apple’s HIG but of course Microsoft also has guides on how to design applications. They are a bit disjointed at the moment and seem to be a work in progress, Windows 10 is coming soon so I hope they catch up.

74. Embedded computers

75. Embedded computersUI design is not only about operating systems though. Everything is a computer these days. For a few years I’ve been more interested in things that are not so obviously computers but still need a UI.

76. I tend to make movies of every UI I encounter, for example this is the one to buy train tickets in Italy. It is decidedly well done. In my opinion the gradient button - iOS6 style - is still the most obvious and easy to use UI style, especially for those things you only use a few times.

78. Japan is the place to be for checking out the latest and greatest in UI. I love to go to Sony Center in Ginza and try out the latest cameras. And in Osaka there is a Panasonic Innovation Centre where you can check their latest oﬀerings.

79. Some of you may have read my blog posts on UI design, they are on our company blog and have also appeared on “Design Made in Japan”.

80. Hardware

81. Conference talks

82. Bret Victor - Inventing on Principle (2012)

83. Developer conferences

84. Introducing the New System Fonts (WWDC 2015)

85. Games

86. The Elder Scrolls V: Skyrim (2011)

87. The Elder Scrolls IV: Oblivion (2006)

88. Borderlands 2

89. Colin McRae Rally 04

90. Films

91. Star Trek: Into Darkness (2013)

92. 4. UI discussion July 15, 2015Johan Ronsse, UX Talk Tokyo

93. Unlabelled icons

94. Taken from Design: UX Patterns and Responsive Techniques for Universal Windows Apps (Build 2015)

98. Button looks

99. UI customization

100. The humble select element

101. UI customisation is diﬃcult and costly

102. @johan_ronsse jr@mono.company Thanks! Find this talk online at http://mono.company

103. Questions

104. https://dev.windows.com/en-us/design Microsoft - Designing UWP apps Google - Material Design https://www.google.com/design/spec/material-design/introduction.html Apple - Designing for iOS https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/ Apple - Designing for Yosemite Resources

105. How have you found juggling the various UI requirements from various companies?

106. How often do you have to change the designs when encountering regional issues e.g. a design for a Western market vs. a Japanese market?

107. Are you interested in wearable/smartwatch design for example Android Wear & Apple Watch?

108. https://channel9.msdn.com/events/build/2015?wt.mc_id=build_hp Microsoft - Build 2015 sessions Resources (2) https://channel9.msdn.com/Events/Build/2015/2-658 Design: UX Patterns and Responsive Techniques for Universal Windows Apps https://channel9.msdn.com/Events/Build/2015/2-768 Designing and Developing the Ultimate Windows App Experience

109. https://www.youtube.com/channel/UC70UzaroFf5GcyecHOGw-tw WinBeta Youtube channel Resources (3)

110. https://www.youtube.com/watch?v=2DDl7jAIEh8 Colin McRae Rally 04 Menu UI Analysis Star Trek: Into Darkness - User Interface VFX https://vimeo.com/72019454 References Introducing the new system fonts - Apple https://developer.apple.com/videos/wwdc/2015/?id=804 (requires developer account) https://web.archive.org/web/20080223235606/http://developer.apple.com/documentation/ UserExperience/Conceptual/OSXHIGuidelines/OSXHIGuidelines.pdf Original Apple HIG

111. http://mrgan.tumblr.com/post/50108095253/let-a-button-be-a-button Neven Mrgan - Let a button be a button References (2) http://designmadeinjapan.com/magazine/adventures-in-japanese-ui-design-railway-information-systems/ Adventures in Japanese UI Design: Railway Information Systems https://vimeo.com/36579366 Bret Victor - Inventing on Principle