Understanding user interface design

July 15, 2015Johan Ronsse, UX Talk Tokyo

These slides are from a talk given at UX Talk in Tokyo on July 15th. A video of this talk is available athttps://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.

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

1. Introduction

2. The work of a UI designer

3. Keeping up to date and improving your skillset

4. UI discussion

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 finally, if time allows, there is some UI discussion that digs deeper into specific topics.

1. Introduction

July 15, 2015Johan Ronsse, UX Talk Tokyo

Johan Ronsse

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

Mono is a user interface design company

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 etenna 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 3W120Dennis Raboot Volgende patiëntVorige patiënt

Menu Patiënt zoeken Lieve SpoorenMijn ronde

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 etenna 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 3W120Dennis 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.

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

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.

JohanXavier Jan

JohanXavier Jan

We are 3 people: Xavier, Jan and me.

Xavier Johan Jan

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

+

+However, we find that the remote work is not a big problem these days. In fact, the timezone difference sometimes helps us to get things done quicker.

2. The work of a UI designer

July 15, 2015Johan Ronsse, UX Talk Tokyo

2. The work of a UI designer

July 15, 2015Johan Ronsse, UX Talk Tokyo

The first part of this presentation is about the kind of work you do as a user interface designer.

Design and prototyping work

Developer communication

Research

Client communication

Client communication

Design and prototyping work

Developer communication

Research

Client communication

I find 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.

• Understanding their problem

• Understanding their domain

• Becoming knowledgeable their domain and thinking along with the business

Client communication

• 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.

Client communication

• Presenting your work

• In-person meeting

• Screen sharing through Skype

• Video presentations

• Designs and discussion on Basecamp, Slack

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.

Client communication

• Collaborative: drawing together

• Quick sketches and notes while looking at the same “thing”

• Refine by yourself

• Repeat

Client communication

• Collaborative: drawing together

• Quick sketches and notes while looking at the same “thing”

• Refine by yourself

• Repeat

I find 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.

Slick presentation vs. working demo

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 Effects is great for making advanced interaction design videos.

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

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 first. The disadvantage here is that it’s rather time consuming to do.

Client communication

Design and prototyping work

Developer communication

Research

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.

Sketches

This ranges from the first sketches…

Wireframes

… to extensive wireframes…

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 etenna 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 3W120Dennis Raboot Volgende patiëntVorige patiënt

Menu Patiënt zoeken Lieve SpoorenMijn ronde

Visual design

…to the final visual design.

Design tools

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.

Adobe recently updated Photoshop with new features, like artboards…

… and a UI design view that simplifies the interface. I still have to evaluate it.

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

Prototyping

Type of prototype

• Images chained together (InvisionApp, Flinto, …)

• Apple Keynote

• Full HTML/CSS prototype

• Small UI demo (Codepen)

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 final 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.

Chaining images together

Small UI demos

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

Fully interactive HTML/CSS prototypes

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

Design fidelity 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 etenna 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 3W120Dennis Raboot Volgende patiëntVorige patiënt

Menu Patiënt zoeken Lieve SpoorenMijn ronde

Visual design Prototype

In search of the right tool: Sketch + animation

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.

3. Keeping up to date and improving your skillset

July 15, 2015Johan Ronsse, UX Talk Tokyo

Platform knowledge (Operating systems)

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.

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.

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

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

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

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

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

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.

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?

Google is really overcomplicating things on their material design website.

And then they have this website called Google Design…

…where there are videos on how to use colors.

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.

Google as a design player?

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 offended.

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…

… and iOS.

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

Reading this kind of document is pure interface design gold.

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.

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.

Embedded computers

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.

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.

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

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 offerings.

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”.

Hardware

Conference talks

Bret Victor - Inventing on Principle (2012)

Developer conferences

Introducing the New System Fonts (WWDC 2015)

Games

The Elder Scrolls V: Skyrim (2011)

The Elder Scrolls IV: Oblivion (2006)

Borderlands 2

Colin McRae Rally 04

Films

Star Trek: Into Darkness (2013)

4. UI discussion

July 15, 2015Johan Ronsse, UX Talk Tokyo

Unlabelled icons

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

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

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

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

Button looks

UI customization

The humble select element

UI customisation is difficult and costly

@johan_ronsse jr@mono.company

Thanks!

Find this talk online at http://mono.company

Questions

https://dev.windows.com/en-us/design

Microsoft - Designing UWP apps

Google - Material Designhttps://www.google.com/design/spec/material-design/introduction.html

Apple - Designing for iOShttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/

Apple - Designing for Yosemite

Resources

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

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?

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

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

https://www.youtube.com/channel/UC70UzaroFf5GcyecHOGw-tw

WinBeta Youtube channel

Resources (3)

https://www.youtube.com/watch?v=2DDl7jAIEh8

Colin McRae Rally 04 Menu UI Analysis

Star Trek: Into Darkness - User Interface VFXhttps://vimeo.com/72019454

References

Introducing the new system fonts - Applehttps://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

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