The document outlines 20 principles of user interface design. The principles stress that interfaces should provide clarity, enable interaction, and conserve user attention. Interfaces should keep users in control, use direct manipulation, and have a single primary action per screen. Consistency, organization, and progressive disclosure help reduce cognitive load. Great design is invisible and solves existing problems.
Using Web 2.0 Teaching Tools for Motivating Students and Engaging Them in Cre...ilkyen
Using Web 2.0 Teaching Tools for Motivating Students and Engaging Them in Creative Thinking @
The 20th International Conference on Computers in Education
(ICCE 2012)
Seven Master of Arts students from Constance at the University of Applied Sciences Communication Design faculty are working on design research concerning multi-touch interfaces during summer term 2008. Studying a research paper ...
Selection of projects that I worked with stakeholders to develop product or service design. Projects developed in internships with companies as Play DXTR, Fydico and Mini Booster.
Using Web 2.0 Teaching Tools for Motivating Students and Engaging Them in Cre...ilkyen
Using Web 2.0 Teaching Tools for Motivating Students and Engaging Them in Creative Thinking @
The 20th International Conference on Computers in Education
(ICCE 2012)
Seven Master of Arts students from Constance at the University of Applied Sciences Communication Design faculty are working on design research concerning multi-touch interfaces during summer term 2008. Studying a research paper ...
Selection of projects that I worked with stakeholders to develop product or service design. Projects developed in internships with companies as Play DXTR, Fydico and Mini Booster.
Characteristics of a well designed user interfaceThomas Byttebier
"Designing a good user interface is like tightrope walking: it's all about finding the right balance."
Translated slides for a presentation I first gave at Luca School of Arts, Gent, March 2015.
[Slightly updated November and December 2015]
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
On these slides I have explained visual design principles and UI design best practices. This will help you to improve your visualization and UI Designing skills.
Guerrilla Usability: Insight on a ShoestringDavid Sturtz
Presented at Iowa Code Camp, May 2010: Iterative and Agile development mean shorter cycles and a desperate need for quick feedback. Luckily, improving the user experience of your software doesn’t require days in a lab. This session will present more than twenty-five tools and techniques for gaining insight into your users’ minds and actions.
So much of the mobile experience is context and location specific. App use tends to be more immediate, reactive and transient, prompted by something that happens in the users' environment rather than by their work schedule.
Traditional lab methods really don't work too well to capture these behaviors. From a physical perspective there is seldom a video-out port to capture screen images, and there is no easy way to capture gestures or button presses. From a behavioral perspective, it's often hard to "set the scene" for your app's use when your user is sitting inside a sterile office room.
So how do we cheaply and quickly gather feedback on the mobile apps that we develop? What techniques can we use to balance ecological validity with solid data collection?
A Model for Information Environments - Reframe IA Workshop 2013Andrew Hinton
My five-minute ignite-style talk for the Reframe IA workshop. Please note, for SlideShare purposes, I had to embed my notes into the slides, because PowerPoint wasn't behaving with other options.
(Information about the workshop: http://2013.iasummit.org/program/workshops/the-amazing-academics-practitioners-round-table/)
Design visualisations are information products that communicate how new products or services will work. The way they do this is by showing the new product or service in action, using a combination of text and pictures to tell the story of the future user experience.
Dynamic IA: External & Internal Contexts for ReframingDesign for Context
Presentation by Duane Degler at IA Summit on April 3, 2013. Technological, economic, social, and cultural elements of change have thoroughly transformed the scenario in which information architecture operated in the late 1990s, and a reframing is moving the conversation forward, consolidating intuitions into discipline, and helping establish a common language and grammar for both practice and research in the field.
The ideas within this presentation are elaborated in Duane’s chapter of the same name in the recently released book: Reframing Information Architecture, edited by Andrea Resmini. Dynamic IA outlines ways that Information Architects can consider evolving changes in user context, data structure and availability, and technology, as well as the methods in the practice of IA.
See book description and available formats on Springer’s site: http://www.springer.com/computer/hci/book/978-3-319-06491-8
See the hardcover version on Amazon: http://www.amazon.com/Reframing-Information-Architecture-Human-Computer-Interaction/dp/3319064916
UX Coaching - helping developers become better generalistsChris Nodder
A solution for user experience (UX) practitioners struggling in an Agile environment. Coach the whole team in UX methods so that the basic skills become part of their repertoire. Includes reference to Empathizing/Systemizing theory to help ground coaching with techniques that will appeal to developers.
Presented at Balanced Team conference 2011, San Francisco.
An excellent primer explains the fundamentals essential to creating an intuitive, user-centered interface for web sites, mobile apps and virtually any digital media publication
UI Design Principles : 20 Essential Rules for User Interface DesignMoodLabs
This essential primer distills the critical principles of User Interface (UI) design to 20 fundamental rules. Created by Josh Porter (Director of UX at HubSpot), this guide is a must-have for UX / UI professionals.
These principles are equally valuable to those looking to understand User Experience and User Interface best practices in a quick, well-written and comprehensive deck.
Examples:
01 - Clarity is job #1
02 - Interfaces exist to enable interaction
03 - Conserve attention at all costs
04 - Keep users in control
05 - Direct Manipulation is best
These and the rest of the 20 principles offer basic rules supported by reasoning that is intuitive, makes sense and builds on the information in preceding slides.
The Cliff Notes Bible of delivering great, effective & powerful UI experiences.
Characteristics of a well designed user interfaceThomas Byttebier
"Designing a good user interface is like tightrope walking: it's all about finding the right balance."
Translated slides for a presentation I first gave at Luca School of Arts, Gent, March 2015.
[Slightly updated November and December 2015]
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
On these slides I have explained visual design principles and UI design best practices. This will help you to improve your visualization and UI Designing skills.
Guerrilla Usability: Insight on a ShoestringDavid Sturtz
Presented at Iowa Code Camp, May 2010: Iterative and Agile development mean shorter cycles and a desperate need for quick feedback. Luckily, improving the user experience of your software doesn’t require days in a lab. This session will present more than twenty-five tools and techniques for gaining insight into your users’ minds and actions.
So much of the mobile experience is context and location specific. App use tends to be more immediate, reactive and transient, prompted by something that happens in the users' environment rather than by their work schedule.
Traditional lab methods really don't work too well to capture these behaviors. From a physical perspective there is seldom a video-out port to capture screen images, and there is no easy way to capture gestures or button presses. From a behavioral perspective, it's often hard to "set the scene" for your app's use when your user is sitting inside a sterile office room.
So how do we cheaply and quickly gather feedback on the mobile apps that we develop? What techniques can we use to balance ecological validity with solid data collection?
A Model for Information Environments - Reframe IA Workshop 2013Andrew Hinton
My five-minute ignite-style talk for the Reframe IA workshop. Please note, for SlideShare purposes, I had to embed my notes into the slides, because PowerPoint wasn't behaving with other options.
(Information about the workshop: http://2013.iasummit.org/program/workshops/the-amazing-academics-practitioners-round-table/)
Design visualisations are information products that communicate how new products or services will work. The way they do this is by showing the new product or service in action, using a combination of text and pictures to tell the story of the future user experience.
Dynamic IA: External & Internal Contexts for ReframingDesign for Context
Presentation by Duane Degler at IA Summit on April 3, 2013. Technological, economic, social, and cultural elements of change have thoroughly transformed the scenario in which information architecture operated in the late 1990s, and a reframing is moving the conversation forward, consolidating intuitions into discipline, and helping establish a common language and grammar for both practice and research in the field.
The ideas within this presentation are elaborated in Duane’s chapter of the same name in the recently released book: Reframing Information Architecture, edited by Andrea Resmini. Dynamic IA outlines ways that Information Architects can consider evolving changes in user context, data structure and availability, and technology, as well as the methods in the practice of IA.
See book description and available formats on Springer’s site: http://www.springer.com/computer/hci/book/978-3-319-06491-8
See the hardcover version on Amazon: http://www.amazon.com/Reframing-Information-Architecture-Human-Computer-Interaction/dp/3319064916
UX Coaching - helping developers become better generalistsChris Nodder
A solution for user experience (UX) practitioners struggling in an Agile environment. Coach the whole team in UX methods so that the basic skills become part of their repertoire. Includes reference to Empathizing/Systemizing theory to help ground coaching with techniques that will appeal to developers.
Presented at Balanced Team conference 2011, San Francisco.
An excellent primer explains the fundamentals essential to creating an intuitive, user-centered interface for web sites, mobile apps and virtually any digital media publication
UI Design Principles : 20 Essential Rules for User Interface DesignMoodLabs
This essential primer distills the critical principles of User Interface (UI) design to 20 fundamental rules. Created by Josh Porter (Director of UX at HubSpot), this guide is a must-have for UX / UI professionals.
These principles are equally valuable to those looking to understand User Experience and User Interface best practices in a quick, well-written and comprehensive deck.
Examples:
01 - Clarity is job #1
02 - Interfaces exist to enable interaction
03 - Conserve attention at all costs
04 - Keep users in control
05 - Direct Manipulation is best
These and the rest of the 20 principles offer basic rules supported by reasoning that is intuitive, makes sense and builds on the information in preceding slides.
The Cliff Notes Bible of delivering great, effective & powerful UI experiences.
Wireframes are an important step in the creative process & Design Thinking. It's one of the first times that your team actually sees the product come together. The presentation explores the basics of wireframes and how they fit into the process of Human-centered Design.
This deck was part of workshop held by General Assembly on the Intro to Wireframing on 2-10-2015
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Everett McKay
A user interface is ultimately a conversation between users and technology, so well-designed user interfaces use the language of UI to communicate to users efficiently, naturally, and intuitively. Focusing on effective human communication removes much of the mystique, subjectiveness, and complexity from user interface design, and helps you make better design decisions with confidence.
In this talk, Everett McKay presents the core principles of communication-focused design, shows how they apply to intuitive interactions and task flows, provides some communication-based design tools and techniques, and applies these principles and tools to several design makeovers. In the end, you will have a new perspective that will help you make better design decisions more quickly and confidently.
Document with the most important design principles in the field of HCI.
It lists HCI principles in a quick way with examples of the real world, and links to research for further information. Use it to guide and base your decision rationale, wether you're designing software apps, websites, physical objects, marketing, etc.
This is a deck i would often use highlighting the mess of website irrelevance I call today, Microsoft.com and its associate sites.
There is way to much noise and not enough signal and the deck hopefully highlights one slice of this reasoning.
Social Intranet Design Strategies presented by Intranet Connections CEO Carolyn Douglas at the 19th Annual Intranets for Internal Communications, Vancouver, BC
Similar to Principles of user interface design (20)
Social Intranet Design Strategies: Putting People First
Principles of user interface design
1. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
"To design is much more than simply to assemble, to order,
or even to edit; it is to add value and meaning, to
illuminate, to simplify, to clarify, to modify, to dignify, to
dramatize, to persuade, and perhaps even to amuse." - Paul
Rand
01. Clarity is job #1
Clarity is the first and most important job of any interface. To be
effective using an interface you've designed, people must be able
to recognize what it is, care about why they would use it,
understand what the interface is helping them interact with,
predict what will happen when they use it, and then successfully
interact with it. While there is room for mystery and delayed
gratification in interfaces, there is no room for confusion. Clarity
inspires confidence and leads to further use. One hundred clear
screens is preferable to a single cluttered one.
02. Interfaces exist to enable
interaction
Interfaces exist to enable interaction between humans and our
world. They can help clarify, illuminate, enable, show
relationships, bring us together, pull us apart, manage our
expectations, and give us access to services. The act of designing
interfaces is not Art. Interfaces are not monuments unto
themselves. Interfaces do a job and their effectiveness can be
measured. They are not just utilitarian, however. The best
interfaces can inspire, evoke, mystify, and intensify our
1 of 7 8/3/2012 2:24 PM
2. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
relationship with the world.
03. Conserve attention at all costs
We live in a world of interruption. It's hard to read in peace
anymore without something trying to distract us and direct our
attention elsewhere. Attention is precious. Don't litter the side of
your applications with distractible material…remember why the
screen exists in the first place. If someone is reading let them
finish reading before showing that advertisement (if you must).
Honor attention and not only will your readers be happier, your
results will be better. When use is the primary goal, attention
becomes the prerequisite. Conserve it at all costs.
04. Keep users in control
Humans are most comfortable when they feel in control of
themselves and their environment. Thoughtless software takes
away that comfort by forcing people into unplanned interactions,
confusing pathways, and surprising outcomes. Keep users in
control by regularly surfacing system status, by describing
causation (if you do this that will happen) and by giving insight
into what to expect at every turn. Don't worry about stating the
obvious…the obvious almost never is.
05. Direct manipulation is best
The best interface is none at all, when we are able to directly
manipulate the physical objects in our world. Since this is not
always possible, and objects are increasingly informational, we
create interfaces to help us interact with them. It is easy to add
more layers than necessary to an interface, creating overly-
wrought buttons, chrome, graphics, options, preferences,
windows, attachments, and other cruft so that we end up
manipulating UI elements instead of what's important. Instead,
strive for that original goal of direct manipulation…design an
interface with as little a footprint as possible, recognizing as much
as possible natural human gestures. Ideally, the interface is so
slight that the user has a feeling of direct manipulation with the
2 of 7 8/3/2012 2:24 PM
3. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
object of their focus.
06. One primary action per screen
Every screen we design should support a single action of real value
to the person using it. This makes it easier to learn, easier to use,
and easier to add to or build on when necessary. Screens that
support two or more primary actions become confusing quickly.
Like a written article should have a single, strong thesis, every
screen we design should support a single, strong action that is its
raison d'etre.
07. Keep secondary actions
secondary
Screens with a single primary action can have multiple secondary
actions but they need to be kept secondary! The reason why your
article exists isn't so that people can share it on Twitter…it exists
for people to read and understand it. Keep secondary actions
secondary by making them lighter weight visually or shown after
the primary action has been achieved.
08. Provide a natural next step
Very few interactions are meant to be the last, so thoughtfully
design a next step for each interaction a person has with your
interface. Anticipate what the next interaction should be and
design to support it. Just as we like in human conversation,
provide an opening for further interaction. Don't leave a person
hanging because they've done what you want them to do…give
them a natural next step that helps them further achieve their
goals.
09. Appearance follows behavior
(aka form follows function)
Humans are most comfortable with things that behave the way we
expect. Other people, animals, objects, software. When someone or
3 of 7 8/3/2012 2:24 PM
4. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
something behaves consistently with our expectations we feel like
we have a good relationship with it. To that end designed elements
should look like how they behave. In practice this means that
someone should be able to predict how an interface element will
behave merely by looking at it. If it looks like a button it should act
like a button. Don't get cute with the basics of interaction…keep
your creativity for higher order concerns.
10. Consistency matters
Following on the previous principle, screen elements should not
appear consistent with each other unless they behave consistently
with each other. Elements that behave the same should look the
same. But it is just as important for unlike elements to appear
unlike (be inconsistent) as it is for like elements to appear
consistent. In an effort to be consistent novice designers often
obscure important differences by using the same visual treatment
(often to re-use code) when different visual treatment is
appropriate.
11. Strong visual hierarchies work
best
A strong visual hierarchy is achieved when there is a clear viewing
order to the visual elements on a screen. That is, when users view
the same items in the same order every time. Weak visual
hierarchies give little clue about where to rest one's gaze and end
up feeling cluttered and confusing. In environments of great
change it is hard to maintain a strong visual hierarchy because
visual weight is relative: when everything is bold, nothing is bold.
Should a single visually heavy element be added to a screen, the
designer may need to reset the visual weight of all elements to
once again achieve a strong hierarchy. Most people don't notice
visual hierarchy but it is one of the easiest ways to strengthen (or
weaken) a design.
12. Smart organization reduces
4 of 7 8/3/2012 2:24 PM
5. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
cognitive load
As John Maeda says in his book Simplicity, smart organization of
screen elements can make the many appear as the few. This helps
people understand your interface easier and more quickly, as
you've illustrated the inherent relationships of content in your
design. Group together like elements, show natural relationships
by placement and orientation. By smartly organizing your content
you make it less of a cognitive load on the user…who doesn't have
to think about how elements are related because you've done it for
them. Don't force the user to figure things out…show them by
designing those relationships into your screens.
13. Highlight, don't determine, with
color
The color of physical things changes as light changes. In the full
light of day we see a very different tree than one outlined against a
sunset. As in the physical world, where color is a many-shaded
thing, color should not determine much in an interface. It can
help, be used for highlighting, be used to guide attention, but
should not be the only differentiator of things. For long-reading or
extended screen hours, use light or muted background colors,
saving brighter hues for your accent colors. Of course there is a
time for vibrant background colors as well, just be sure that it is
appropriate for your audience.
14. Progressive disclosure
Show only what is necessary on each screen. If people are making
a choice, show enough information to allow them the choice, then
dive into details on a subsequent screen. Avoid the tendency to
over-explain or show everything all at once. When possible, defer
decisions to subsequent screens by progressively disclosing
information as necessary. This will keep your interactions more
clear.
15. Help people inline
5 of 7 8/3/2012 2:24 PM
6. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
In ideal interfaces, help is not necessary because the interface is
learnable and usable. The step below this, reality, is one in which
help is inline and contextual, available only when and where it is
needed, hidden from view at all other times. Asking people to go to
help and find an answer to their question puts the onus on them to
know what they need. Instead build in help where it is
needed…just make sure that it is out of the way of people who
already know how to use your interface.
16. A crucial moment: the zero state
The first time experience with an interface is crucial, yet often
overlooked by designers. In order to best help our users get up to
speed with our designs, it is best to design for the zero state, the
state in which nothing has yet occurred. This state shouldn't be a
blank canvas…it should provide direction and guidance for getting
up to speed. Much of the friction of interaction is in that initial
context…once people understand the rules they have a much
higher likelihood of success.
17. Existing problems are most
valuable
People seek out solutions to problems they already have, not
potential problems or problems of the future. Therefore, resist
creating interfaces for hypothetical problems, observe existing
behavior and design to solve existing problems. This isn't as
exciting as blue sky wondering but can be much more rewarding as
people will actually use your interface.
18. Great design is invisible
A curious property of great design is that it usually goes unnoticed
by the people who use it. One reason for this is that if the design is
successful the user can focus on their own goals and not the
interface…when they complete their goal they are satisfied and do
not need to reflect on the situation. As a designer this can be
tough…as we receive less adulation when our designs are good.
But great designers are content with a well-used design…and know
6 of 7 8/3/2012 2:24 PM
7. Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/
that happy users are often silent.
19. Build on other design
disciplines
Visual and graphic design, typography, copywriting, information
architecture and visualization…all of these disciplines are part of
interface design. They can be touched upon or specialized in. Do
not get into turf wars or look down on other disciplines: grab from
them the aspects that help you do your work and push on. Pull in
insights from seemingly unrelated disciplines as well…what can we
learn from publishing, writing code, bookbinding, skateboarding,
firefighting, karate?
20. Interfaces exist to be used
As in most design disciplines, interface design is successful when
people are using what you've designed. Like a beautiful chair that
is uncomfortable to sit in, design has failed when people choose
not to use it. Therefore, interface design can be as much about
creating an environment for use as it is creating an artifact worth
using. It is not enough for an interface to satisfy the ego of its
designer: it must be used!
Make them Care! - Struggling to communicate the value of your
product or service? I'm writing a new book that shows you how to
make people care about your product or service by clearly
communicating the most important bits. For designers and marketers
creating product web sites. Find out more.
Written by Joshua Porter, an interface and product designer at @HubSpot. I currently live
in Newburyport, MA, USA. If you like UI or design, you can follow me on Twitter here.
7 of 7 8/3/2012 2:24 PM