Intro to UX: Enterprise UX

natural user experience.
Bart Van Hecke.
Managing Partner /
UXUI Designer Continuous

360° User Experience
Continuous

improve customer satisfaction and loyalty through the
utility, ease of use, and pleasure provided in the interaction
with a product.”
The goal of UX

What we’ll cover
A brief history and future of UX
What is UX and why is it important?
UX Principles:
- General interface principles
- Enterprise UX
UX Project approach
UI Principles

Who are you
and why are
you here?

A brief history and
future of UX

A brief history of UX
Since the beginning of the Machine Age
Henry Ford pioneered ways to make
human labor more efﬁcient, productive
and routinized

1940: ergonomics & human factors
Focus on design of things to best
align with human capabilities

1950: cognitive science
& augmented reality
potential of computers to serve as a
tool to augment human mental
capacities

1955: ‘Designing for People’
by Henry Dreyfuss
“When the point of contact between the
product and the people becomes a point of
friction, then the [designer] has failed. On
the other hand, if people are made safer,
more comfortable, more eager to purchase,
more efﬁcient—or just plain happier—by
contact with the product, then the
designer has succeeded.”

first GUI
first mouse
first computer-generated bitmap graphics
> inspired Apple Macintosh
Xerox PARC

1970’s: Rise of Human Computer
Interaction

1980’s: Rise of the ﬁrst webpages

Donald Norman
User centered designer at Apple
ﬁrst mention of UX

Increasing functionality, interactivity
>>>

Focus even more on the user

More hands, less mice
Natural UI
Less chrome, more content
A brief future of UX

Contextual Designing

technology will not look like
technology anymore
it will dissolve in everyday life

UX
will become
more and more the
tool of innovation

Everyday, everywhere
we experience things

So if we like talking
about experiences
and feelings so much
why do we keep
creating horrible
experiences?

We’re building
something that
needs to be used
by someone

How does it make people feel?
How can we make their life easy?
How can we add value to their life?
How does it solve a user’s problem?

We want you
to make the
user experience
pretty
What UX is not

psychology
anthropology
architecture
sociology
computer science
industrial design
coginitive science
communication
design
content strategy
What UX is

What is UX?
“Experience design is the design of anything, independent of
medium or across media, with human experience as an
explicit outcome and human engagement as an explicit goal.”
Jesse James Garrett
“UX is the tangible design of a strategy
that brings us to a solution”
Erik Flowers

Information Architecture
Interaction Design
Visual Design
Foundation
Function
Emotion

Why UX?
“Good design brings a story closer to the people”
Richard Turley

UX Principles
for good interface design

The reference
so old and still so new

Users don’t read, they scan.
they search ﬁxed anchor points to guide
them through the content
Don’t make users think

Don’t make users think
my application is obvious and self-explanatory!
avoid user’s question marks

Keep it as simple as
possible
- My users need an answer quick
- Keep it to the minimum
- Hide lesser features

Keep it as simple as
possible
If a task gets too big, break it up

- my users want control.
- they like consistent data
- presentation throughout the site
Keep it consistent

Use conventions
& patterns
- Conventions reduce the
learning curve
- users follow their intuition
if we ﬁnd something that
works, we stick to it
- Innovate only when you think
you have a better idea (Steve
Krug)

Use conventions
& patterns
Use conventional UI language

360° user experience.
- 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 do i use the right pattern?

Package Delivery Application
- Naam Leverancier
- Naam Ontvanger
- Contactgegevens Leverancier
- Contactgegevens Ontvanger
- Type product
- Grootte product
- Naam Product
- Opmerking product
- Datum aflevering
- Uur aflevering
- Datum vertrek
- Type transport
- Naam Chauffeur
- Contactgegevens chauffeur
- Opmerking transport

But ﬁrst, a word on sketching
To sketch you only need 3 shapes

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

Give users control
- But not too much
- Provide escape hatches

Use effective copy
- Talk business
- my users appreciate quality
and credibility
- content is more important than
design that supports it

Don’t waste users’ patience
- Require little effort from my user
- Let users play around with an application
before asking them for sensitive data
- if a user doesn’t really need something,
don’t bother the user asking
- Use good defaults when using forms
- Predict what the user will do ﬁrst and
make that task easy!

Focus users’ attention
- Give users need a sense of orientation
& direction
- Give users easy labels, call to action

Design for edge cases
my users will ﬁnd any ﬂaw, avoid this!

Create for playfulness
Users enjoy tiny unforeseen
surprises or awards

Steal from the best
There were smartphones before
iPhone but Apple was the ﬁrst one to
create a good UX

Test early, test often!
- TETO principle
- 1-10-100 rule
- iterative process
- developers are unsuited to test their own code,
- so are designers unsuited to test their own design
1 10 100

Good UX principles
- Don’t make users think
- Keep it as simple as possible
- Keep it consistent
- Use conventions & patterns
- Give users control
- Use effective copy
- Don’t waste users’ patience
- Focus users’ attention
- Use whitespace
- Design for edge cases
- Create for playfulness
- Steal from the best
- Test early, test often

Saving users time
saves company money
Good UX

Problem
- Context of use is different. (Business, not pleasure.)
- Enterprise applications aren’t “sexy.”
- Stakeholder vision doesn’t always align with user needs.
- Enterprise applications are complex, task-based systems
- Personas often include Super Users and Casual Users
- Mobile isn’t always a given
- Companies adopt a “just get it done” attitude

Result
Time spent / Money lost
Frustrated user

Solution?
- Give those tools the same attention you give consumer-facing products.
- Test with your end users (they are in your company)
- Design for simplicity
Good design enables enterprises to do the work they were founded to do.
Reward

How do we achieve simplicity with all the security and technical concerns,
business processes, and compromises across business units to consider?
Design for simplicity?
- use a subtle background
- use white
- use a nice type
- use nice colors with hues
- round corners
- design skins and themes
and let users customize
the application

Forms
- Only ask what’s necessary
- Order the form logically
- Group related information
- Hide lesser features

Forms
- Try to keep forms in one column
- Possibly more columns if it makes sense
Columns

Forms
Limit the number of
input ﬁelds
Input ﬁelds

Forms
- Show what’s
mandatory / optional
- Use ‘Optional’ as
label only when there
are many mandatory
ﬁelds
Input ﬁelds

Forms
- Use short labels
- Not help texts!
Labels

Forms
- Use sentence caps
- never use all caps!
Labels

Forms
- Topaligned results in quickest
completion time
- Best for multi language support
- Require most space
Label location

- Right aligned is easier to scan than
left aligned
- poor multi language support
- Left = harder to concentrate
Forms
Label location

- Inline labels require no space
- User has no clue on label when
he is ﬁlling in input ﬁeld
- More for mobile applications
Forms
Label location

- Floating labels
- More for mobile applications
Forms
Label location

Provide hints on input format or
expected content
Forms
Hints

- Input masks
- AutoComplete
Forms
Effortless Formatting

- Good defaults
- Autofocus
- AutoCorrect
- AutoCapitalize
- SpellCheck
Forms
Effortless Formatting

Example

- Make distinction between ‘primary’
and ‘secondary’ actions
- Direct people to successful
outcomes
Action buttons
Primary vs Secondary

- Place secondary buttons ‘out of
sight’
- Buttons are best placed under a
form
- Depends on pattern
Action buttons
Button location

- Name buttons as close to context as
possible, not vaguely
Action buttons
Naming Conventions

- Make a button look like a button
Action buttons
Visual Appearance

How about dashboards?
- How am I doing? What’s going on?
- What’s my recent activity?
- What are the problems I need to
know about?
- What’s my to do?
- What are the trends in my business?

How about dashboards?
- Dashboards should be highly visual
- Who is the user?
- What are they responsible for?
- What is the most important for
them to know?
- What do they need to take action
on?
- What will cause a problem for them
if it does not go well?

What is NOT a dashboard?

Dashboard principles
- Use relative proportions
- progress towards a goal

Dashboard principles
- Trends over time
- Activity over time

What makes Enterprise UX work?
- Build the right internal team
- Foster Collaboration (the executive team, your organization’s existing teams, and
your users.

The lifecycle of a project
Discover
Technology
Strategy
Formulation
Deﬁne
Requirement
Analysis
Speciﬁcation
Design
Architecture
Design
Documentation
Develop
Standards
Best Practices
Driven SDLC
Deploy
Production
Operations
Support

UX Flow
- Capturing the project ecosystem
Get to know the business &
Business Requirements
> Project objectives
- Plan the project
Project Approach: Methodology
- Discover & Deﬁne
Task Models & User Journeys
Sketching
- Design & Build
Wireframing & Prototyping
Usability Testing
- Visual Design

Part 1
Discover:
Capturing the project ecosystem
Business & User requirements

Kickoff meeting
WHAT SHOULD THE APPLICATION DO?
Project objectives
help you:
- ask the right questions
- plan research with users
- details the ideas from
stakeholders
- create effective interaction
designs
- manage request for changes
- understand the company culture
- what project will i be working on?
- why is the project important to the company?
- what are the project objectives?
Write down in one sentence

Part 2
Plan the project:
scope & approach

- Specify the must-haves and nice to haves within budget
- Create a product backlog with user stories
- Create sprints
- Deﬁne the deadlines
- Create high level estimation
Deﬁne the scope

Project approach
Waterfall Agile

Agile via Lean UX
Less deliverables
Less time and waste
Quicker to market
Build - Measure - Learn
(Obligation to) Fail at start

Part 3
Deﬁne:
building the architecture

User Journeys
- Set the context: Where is the user? What is
around him?
- Progression: how does each step enable him to
get to the next?
- Device: what device is he using? Is he/she a
novice, expert
- Functionality: what type of functionality does
he/she expect? is it achievable?
- Emotion: what is their emotional state in each
step? is he/she engaged, bored, annoyed

Experience map
- understand the product/service interactions from a users’
point of view
- pinpoint gaps in the overall customer experience which
makes it easier to identify areas for product innovation

Task Models
- Description of activities a user needs to
perform in order to reach their goal
- Helps you understand how your users
interact with information provided by the
product
- Can help you choose features for a widget
(eg comparison table, sharing widget,…)
- Can help you decide: eg is the widget handy
here in the task ﬂow or elsewhere?
- Helps you understand how users think
about the task at hand

- IA should solve information overload
- IA is commercially important
> how well a user ﬁnds the product or
service
- Makes SEO easier
- Will result in site map or navigation
Information Architecture

- Must meet your user group
- Information based on research
- Can never replace real user testing
Personas

Start deﬁning your experience
Prioritise and visualize through:
- customer journey
- task model or task analysis
- experience map
- information architecture
BUILD THE ARCHITECTURE

Good UX principles Prioritise pages
- specify templates
- order them in rank of
prioritisation
- Don’t make users think
- Keep it as simple as possible
- Keep it consistent
- Use conventions & patterns
- Give users control
- Use effective copy
- Don’t waste users’ patience
- Focus users’ attention
- Use whitespace
- Design for edge cases
- Create for playfulness
- Steal from the best
- Test early, test often
SKETCH THE SCREENS

Wireframes
& Prototypes
Envision the process
and make it interactive
before building it

Principles of wireframes
Don’t spend too much
time with makeup

Use consistent terminology
Principles of wireframes

Provide annotations
Principles of
wireframes

Test them!
> usability testing
Fail ﬁrst and fail early
Principles of
wireframes

Different forms of user testing:
- Guerrilla testing
- Stakeholder interview
- Contextual research
- Call center listening, email reading,…
- customer surveys
- …
User Testing

Usability Testing
- Let users perform tasks on an existing website
- Write down quotes or remarks from users on sticky notes
- Develop a test plan
- Choose participants
- Analyze data
remote tools:
usertesting.com

UI Design Principles
for good interface design

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

patterns & best practices
+ visual language
+ consistency
= good usability
The equation of good UX

Visual Language
aﬀordances and signiﬁers

Aﬀordance

start with a minimal UI
General rules for visual language

- Keep it lightweight, no overkill with
content
- Should convey easily what we do or offer
- What is the key task?
- should inspire
- should show that it’s regularly updated
(eg new products, dates, facebook likes)
Homepage

use consistent fonts,
color, writing style,
grammar

my users like it simple, yet clean
Strip out as much
as you can!

https://ia.net/know-how

use white

create visual balance

think mobile ﬁrst!

use contrast

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

Use real content
(when possible)
Copy is a design element
Lorem Ipsum will break the design

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

Use authentic images
not stock photos
Images

- Show photos of how
something is used,
how it would look in your world
- pictures say more than words
Images

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 eﬀorts
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 diﬀerent 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!

Imitate by default
Innovate when possible
my users are unconsciously accustomed to
certain design principles

Be inconsistent when you can

How does Sketch work?

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

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
ux.stackexchange.com
UI Pattern Links

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

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

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

Intro to UX: Enterprise UX

More Related Content

What's hot (20)

Similar to Intro to UX: Enterprise UX (20)

Recently uploaded (20)

Intro to UX: Enterprise UX