Ui design

natural user experience.
natural user experience

Bart Van Hecke
UI/UX Designer - Managing Partner

visual
design
Business
Designer
Project Manager
Development
Analyst
Product Owner
analysis
wireframing &
prototyping
ux development
Continuous

Development
Product Owner
Project Manager
Analyst
Business
analysis
wireframing &
prototyping
visual
design
ux development
Continuous
Continuous

lightweight task analysis
wireframing & prototyping
ui & interaction design
ux development
Continuous

Chapter 1
Getting Friendly

09:15-09:30 UX / UI?
09:30-10:30 Discover: Conceptualize the app
10:30-12:00 Define: Wirefaming & Prototyping
13:00-17:00 Design: UI Design
Programma

Episode 2
What is UX/UI?

UX
UI

UX
is about
analysing requirements, functionality
and usability
UI
is about visualising the process
in a user-friendly and attractive manner

From UX to UI
listen to organisations
help organisations understand their
users by listening as a stupid user
drink coffee
Discover

translate all considerations into
wireframes & prototypes
advise on technological feasibility
point to risks to look out for
Define

visualise ideas into mockups
translate business style
guidelines
assist developers
Design
help organisations envision
the application to be

sketch with pen & paper
wireframe & prototype with Axure
with Sketch, Photoshop & Illustrator
Define
Design
Discover
business & user requirements

Step 1
Discover

Sales application for iPad (or laptop) + iPhone
A sales app for sales people to showcase portfolio and book orders
and for sales managers to consult sales figures

Step 2
Define

Sketch with pen & paper

wireframing
& prototyping

show wireframe

General rules of good interface design
- Understand your users, emphatize with them
- for each feature, ask why, and ask why again
- solve the right problem!
Information Architecture

Read the requirements,
Sketch the application

Create a detailed user task flow

Wireframe the application,
make it interactive

Step 3
Design

Part 2
The Rules

patterns
visual language
consistency
= usability
The important rules of UI

Patterns
solutions to recurring problems

People behave predictably!

Determine the problem that needs to be solved
Explore competition: how did they solve it?
Recreate it for your problem
Go out and learn about the patterns
How to use the right pattern

ui-patterns.com
pttrns.com
http://www.smileycat.com/design_elements/
patternry.com (€)
http://uxporn.uxpin.com/
useyourinterface.com (animations & transitions)
capptivate.com
ux.stackexchange.com
Useful Links

predict what the user will do first, make that task easy!
Best practices

people don’t like to think more than they have to

Good read!

use visual hierarchy
(the most important
things go up front)
& visual flow to lead
them
give your users
direction (easy labels,
call to action,…)

give your users direction (easy labels, call to
action,…)

provide escape hatches

make choices available but not too many

hassle them with logins and forms when really necessary

use good defaults

design with habits in mind and don’t break them

put elements on
predictable places

use information where needed (tooltips, help, manual,…)

choose the right icons, graphics, charts…

if the task gets too big,
break it up

make application-wide settings findable and accesible

put only what you need on the screen

use animations and transitions to mimic physical reality

I have a lot of content that needs to be on one page
I don’t have a lot of space available
I want to separate it into sections
I don’t want my page to reload on every section
Problem
Example

Users don’t like to view a crowded data page
Users like pages in small digestible chunks
Example
Problem

module tabs
Solution

Use when section names are relatively short
Use when the content of each tab can be viewed separate from each other, and
not in context of each other.
Use when the content for each tab has similar structure
Use when you need to show what tab is currently being viewed
Do not use when the content inside each pane would function just as well in its
own separate page.
Beware

Examples

Lazy registration
small step to register, late in process
Other examples of viable patterns
Progressive disclosure
show only essential information in the first step, then invite users to take the
next step.
Forgiving format
let users enter data in their own way, leave it to the system to parse the data
Breadcrumbs
always let users know where they are
…

ui-patterns.com
pttrns.com
http://www.smileycat.com/design_elements/
patternry.com (€)
http://uxporn.uxpin.com/
useyourinterface.com (animations & transitions)
capptivate.com
Again, those useful links

Visual Language
affordances and signifiers

Affordance

start with a minimal UI
General rules for visual language

https://ia.net/know-how

use consistent fonts,
color, writing style,
grammar

use white

create visual balance

think mobile first!

use contrast

Type
treat text as design
element
- use sans-serif
- make type big enough
- avoid cursive, italic
- use white

Images
- set a mood
- make them as small as possible with a quality as high as
possible
- use only when necessary

How does this translate to applications?
but basically an application sets out a functionality, users need
to get a task done.
You could…
- use a subtle background
- use nice type
- use nice colors with hues
- round corners
- design skins and themes and
let users customize the
application

for the love of god, avoid stock photos

Consistency
My UI looks the same, feels the same

creates familiarity, and familiar interfaces are naturally more usable.
Consistency…

is not always uniformity
> look for best ux patterns in relation to context
Consistency…

guarantees unneeded user efforts
Consistency…

makes a product more predictable > more intuitive > more
desirable
Consistency…

- Balance between creativity and consistency
- “Creativity involves breaking out of established patterns in
order to look at things in a different way.”
Consistency & Creativity

Going against proven UI patterns is possible
if you know what you’re doing
but will mostly damage your design

user expectations aren’t only preferences
they’re more than that,
they are habits

Internal Consistency
all outgoing links
are in blue
all other links are
underlined on
hover
MINIMAL
EXPLANATION
TO USER !

- keep colors consistent
- keep same typography rules
- keep terminology the same
- keep icons consistent
- consistent layout across pages
- keep interactions and animations the same
- keep consistent with other internal products
General rules for consistency

Styleguides!

Be inconsistent when you can

Part 3
Which Design Language?

Flat, Material, …?

imitates the real worldSkeuomorphism

focus on the interplay of icons, typography, and color.Flat Design

imitating the physical nature of elementsMaterial Design

Part 1
The Tools

Design with?

- final image assets
- antialiasing
- lot of shortcuts
- excellent colour management
- smart objects
- effects
- very large files
- complex layer compositions
- difficult to select layers
- poor psd to html conversion
through slicing
Photoshop

Excellent but heavyweight tool for graphic design and
photo editing
Photoshop

- mockups
- complex shapes with vector
- multiple artboards
- easy on selecting or duplicating layers
- better manipulation, alignment of objects
- symbol libraries
- large support of file types
- bitmap images
(eg gradients get dithered)
- antialiasing
- masking
Illustrator

Precise tool for vector graphics
Illustrator

- completely vector-based
- better at rendering for web
- small files
- built in grids
- built in artboards
- multiple artboards
- symbols
- fast
- advanced measuring
- cheaper!
- automated file export
- pixel aware! good for screen design
- colour management
- symbols all have the same size
- a little buggy at times
- only for mac
Sketch

Excellent lightweight tool for web UI designers
Sketch

http://blog.mengto.com/sketch-vs-photoshop/
Sketch vs Photoshop?

Alternatives

Conclusion
It’s up to you!

Sketch App

Content Generator
https://github.com/timuric/Content-generator-sketch-plugin
Dynamic Button
https://github.com/ddwht/sketch-dynamic-button
Useful Plugins

Sketch Toolbox
http://sketchtoolbox.com/
Sketch App Resources
http://www.sketchappsources.com/
Useful Resources

Icons

XML-format
vector
paths > so editable as paths
automatic scaling
incompatible with IE8 and
below
(so provide fallback
option)
SVG

Font icons!
eg font awesome, icomoon
Keep icons in one file to see if they harmonise
Create in Illustrator, paste as shape layer into photoshop
Use plugins like pngexpress to automatically export the scale
factors or actions like retinize.it
Tips

Making prototypes from mockups

Mobile UI

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptu
al/MobileHIG/
Follow the Guidelines
https://developer.android.com/design/index.html

Difference between the 2 platforms
http://www.diffen.com/difference/Android_vs_iOS
http://readwrite.com/2013/05/15/the-developers-cheat-sheet-for-iphone-android-app-
design-infographic
http://elekslabs.com/2012/12/android-vs-ios-user-experience.html

How to design for iOS
http://taybenlor.com/2013/05/21/designing-for-ios.html
http://code.tutsplus.com/tutorials/iphone-and-ipad-design-templates-and-how-to-use-
them--mobile-3418
http://bjango.com/articles/designingforretina2/
iOS design cheat sheet
http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

How to design for Android
http://blog.mengto.com/how-to-design-for-android-devices/
http://www.smashingmagazine.com/2011/06/30/designing-for-android/
iOS design cheat sheet
http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/

What about Responsive Design?

Break for content not screens
HTML wireframing
Design for 1 or 2 screens
What about Responsive Design?

The Noun Project
Kuler
Paletton
Coolors
Skala Preview or Adobe Preview CC
Invision
Flinto
flaticons.com
great link to see all tools:
http://market.designmodo.com/tools/
Tools for the UI Designer

http://www.nngroup.com/
http://www.smashingmagazine.com/
http://www.uxbooth.com/
http://alistapart.com/
http://boxesandarrows.com/
http://usabilitygeek.com/
http://usabilitypost.com/
http://feltpresence.com/
http://www.inverra.com/category/blog (especially dashboard design)
http://uxmag.com/
http://designmodo.com/design/ux-design/
Useful UX Links & Blogs

ui-patterns.com
pttrns.com
smileycat.com/design_elements/
patternry.com (€)
uxporn.upxin.com
useyourinterface.com
capptivate.com
UI Pattern Links

Good reads
Designing Interfaces,
O’Reilly
Don’t Make Me Think
Steve Krug
A project guide to UX design
Russ Under
Consistency in UI Design
UXPin (Free Ebook)

Good reads
About Face
Alan Cooper
Prioritizing Web Usability
Jakob Nielsen
Designing The Obvious
Robert Hoekman
The Design of Everyday Things
Donald Norman

Task Analysis & User Research
Information Architecture
Wireframing & Prototyping
UI & Interaction Design
UX Development & Optimalization

Continuous
a future where all things merge into one seamless
experience, consistent, complementary and continuous.
@Continuous_UX

Ui design

More Related Content

Ui design

Editor's Notes