Understanding UI design

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

You will ﬁnd 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 ﬁnally, if time allows,
there is some UI discussion
that digs deeper into
speciﬁc topics.

1. Introduction

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

Hoofdpijn
Ziektebeeld
Opgenomen voor
Darminfectie
Medicijnen
Onderzoeken
na het
eten
na het avondeten
NaamDatum Arts
Rémy
Naessens
Gastrointestinaal
onderzoek
2 dagen
geleden
Rémy
Naessens
Binnen 4 u
Gastrointestinaal
onderzoek
4
Toevoegen
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
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 ﬁ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.

2. The work of a UI
designer

2. The work of a UI
designer
The ﬁrst 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 ﬁ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.

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

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

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

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

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

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

This slide contains a video. A
video of this talk is available at 
https://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 ﬁrst. 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 ﬁrst
sketches…

Wireframes
… to extensive wireframes…

Hoofdpijn
Ziektebeeld
Opgenomen voor
Darminfectie
Medicijnen
Onderzoeken
na het
eten
na het avondeten
NaamDatum Arts
Rémy
Naessens
Gastrointestinaal
onderzoek
2 dagen
geleden
Rémy
Naessens
Binnen 4 u
Gastrointestinaal
onderzoek
4
Toevoegen
Visual design
…to the ﬁnal visual design.

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
simpliﬁes the interface. I still have
to evaluate it.

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.

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

Small UI demos

Fully interactive HTML/CSS prototypes

Design ﬁdelity over time
Sketch Wireframe
Hoofdpijn
Ziektebeeld
Opgenomen voor
Darminfectie
Medicijnen
Onderzoeken
na het
eten
na het avondeten
NaamDatum Arts
Rémy
Naessens
Gastrointestinaal
onderzoek
2 dagen
geleden
Rémy
Naessens
Binnen 4 u
Gastrointestinaal
onderzoek
4
Toevoegen
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

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.

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

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…

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

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.

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

Bret Victor - Inventing on Principle (2012)

Introducing the New System Fonts (WWDC 2015)

The Elder Scrolls V: Skyrim (2011)

The Elder Scrolls IV: Oblivion (2006)

Star Trek: Into Darkness (2013)

4. UI discussion

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

UI customisation is
diﬃcult and costly

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

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

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

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

Understanding UI design

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

More from Johan Ronsse

More from Johan Ronsse (11)

Recently uploaded

Recently uploaded (20)

Understanding UI design