Diseño de la interfaz de usuario

Diseño de la Interfaz de Usuario.
(algunas) recomendaciones básicas
Dr. Toni Granollers
Presentación realizada por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

https://twitter.com/jordisan/status/756431013191020544
22 jul. 2016
Diseño de la Interfaz de Usuario. [T.Granollers - UTP Panamá, Agosto 2017] 2/88

Source:
https://www.interaction-design.org/quote/show/steve-job-6

Índice
• Parte 1: Características Principales de una IU
– Elementos interactivos y simbología
– Consistencia
– Elementos de ubicación
– Navegación
– Identidad
• Parte 2: Elementos importantes en una UI
– Espacio de interacción
– Color
– Tipografía
– Iconos
– Menús
– Tono del mensaje
– Formularios

Características Principales de una interfaz
• Elementos interactivos y simbología
• Consistencia
• Elementos de ubicación
• Navegación
• Identidad
Diseño de la Interfaz de Usuario. [T. Granollers - UTP Panamá, Agosto 2017] 5/88

Elementos interactivos y simbología
• capacidad de ejecución de las diferentes
tareas que el sistema ofrece al usuario
– Links
– Texto interactivo (clicable)
– Botones
– Imágenes y gráficos interactivos (clicables)

Elementos interactivos y simbología
• Consistencia
• Navegación
• Identidad

Consistencia
• se refiere a si los diferentes estados por los
que pasa la interfaz son coherentes y si se
respeta la jerarquía de información
establecida
The consistent approach: the same content offering is replicated across devices, with some
adjustments to accommodate each device’s character

Consistencia
• These adjustments address differences between
devices in facets like form factor, screen size,
interaction model (touch, keys, voice), and
sensors (GPS, accelerometer, gyroscope, and
others).
• They can be visual —adapting screen layouts,
grids, and user interface (UI) element size— but
they can also involve other experience layers,
like information architecture (IA).

Consistencia
• Mashable’s responsive web design for desktop, tablet, and smartphone.
– The three-column tiled layout on the desktop changes into two columns on the tablet, and is
then condensed into a single list column on the smartphone.
– Also, while on the bigger screens the main navigation bar is placed horizontally at the top
across the entire desktop site, on the smartphone it is hidden behind a “hamburger” icon at
the top-left.
The design
adjustments
between devices
highlight an
important principle
of the consistent
approach:
consistent doesn’t
mean identical.

Consistencia
• Google Search results screen for
“Abraham Lincoln” on
desktop/web (top), tablet
(bottom left), and smartphone
(bottom right).
• The page content and design
elements are consistent—yet
not identical—across devices:
– as the available screen real
estate gets smaller, fewer
details are surfaced by default
in the summary cards

Consistencia
Source: https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-
computer-interaction-2nd-ed/user-interface-design-adaptation

Principle of Consistency and Standards in
User Interface Design
Two Key Reasons for
Consistency and
Standards
1. Reduce Learning
2. Eliminate Confusion
Five Ways to Achieve Consistency
1. Your Choice of Language
2. Apply UI Elements asThey are
Originally Defined
3. ConsiderVariousWell-
established ConventionsWhen
Deciding on Layout
4. Design for your User’s
Expectations
5. Create ConsistentVisual
Elements throughoutYour Site
SOURCE: https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-
design?utm_source=facebook&utm_medium=sm&utm_content=two_key_reasons_for_consistency_and_standards_in_us
er_interface_design

Consistencia
• Navegación
• Identidad

Elementos de ubicación
valoración de aquellos elementos de la
interfaz que informan al usuario acerca de
la ubicación dentro de la arquitectura de la
información:
• Users should always know which site
or app they’re in, even if they bypass
the front door and enter through a
search engine or a link to a subsidiary
page.
• Extending the organization’s name,
logo, and graphic identity throughout
is a fairly obvious way to accomplish
this goal.
You Are
Here
The “You Are Here”
indicator can be the
difference between
knowing where you
stand and feeling
completely lost.

UI design.
YOU ARE HERE !!
• Users Don’tAlways Use the Front Door
• TypicalYou-Are-Here Mechanisms
– Logo and branding
– Navigation change
– Headings
– Window (page) title
– URL
– Breadcrumbs
– Contextual cues
– Visual design changes
– Steps
https://www.nngroup.com/articles/navigation-you-are-here

BBC News indicates
where you are with
(1) logo and
branding,
(2) navigation-bar
change,
(3) headings, and
(4) contextual cues.
The page title and
URL include the
article's title and
website's name.

MIT’s
OpenCourseWare
website has great
location
indicators:
(1) branding,
(2) navigation bar
changes,
(3) breadcrumbs,
(4) headings, page
title, and URL, but
it misses the
important, visible,
time context.

Consistencia
Elementos de ubicación
• Navegación
• Identidad

Navegación
• Navegación y “navegabilidad”, se refiere a si
los diferentes estados por los que pasa la
interfaz son coherentes con la Arquitectura de
la Información y si se respeta la jerarquía de
información establecida

https://www.sitepoint.com/design-ux

Identidad
• Todo sistema (aplicación debe tener elementos que permitan al usuario
conocer la identidad del mismo (un nombre, un logo, … algo que acerque
al usuario a saber qué hace y para que sirve el sistema)

Índice
 Parte 1: Características Principales de una IU
 Elementos interactivos y simbología
 Consistencia
 Elementos de ubicación
 Navegación
 Identidad
• Parte 2: Elementos importantes en una UI
– Espacio de interacción
– Color
– Tipografía
– Iconos
– Menús
– Tono del mensaje
– Formularios

Elementos importantes en
una UI
• Espacio de interacción
• Color
• Tipografía
• Iconos
• Menús
• Tono del mensaje
• Formularios
Todo está relacionado
• Elementos interactivos y
simbología
• Coherencia jerárquica
• Navegación
• Identidad
• Relación con los Factores
Humanos

https://yalantis.com/blog/designer-seminar-gridalicious-magicDiseño de la Interfaz de Usuario. [T.Granollers - UTP Panamá, Agosto 2017] 31/88

http://modulargrid.org/#app

https://material.google.com/layout

http://sneakpeekit.com
Free standard multi-purpose grid for your
projects
- Browser
- Pad
- Mobile
- wireframes

Espacio de interacción.
Responsive Design
Let the Device Do theWork
https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Adaptive vs Responsive design
• https://www.interaction-
design.org/literature/article/adaptive-vs-
responsive-design

Responsive design is …
• a way of developing web properties so that
the device they are used on determines the
way that the site will be displayed.
• It’s normally done using the principle “mobile
first”
– i.e. the experience is defined on mobile platforms
such as smartphones and tablets and then scaled
up to larger screens

Author/Copyright holder: Stéphanie Walter. Copyright terms and licence: CC BY-SA 3.0Diseño de la Interfaz de Usuario. [T.Granollers - UTP Panamá, Agosto 2017] 39/88

Ejemplo de un sitio web con un diseño
bastante bueno pero no es responsive:
http://www.rutespirineus.cat

The Three Major
Principles of Responsive Design
• Fluid Grid Systems
• Fluid Image Use
• Media Queries

Principles of Responsive Design.
Fluid Grid Systems
• For the responsive design the absolute size
doesn’t work, we use the idea of relative sizes
rather than absolute ones using this formula:
– Target size / context = relative size
• that is implemented using CSS

Fluid Image Use
• The easiest way to handle fluid images (images
that scale to fit their container) is using the CSS
command:
img {max-width: 100%;}
• This tells the browser that the image should be a
maximum 100% of its pixel value and that it
should scale according to its container

Fluid Image Use
Responsive Images Community Group: http://responsiveimages.org

Media Queries
• Media queries are designed to
alter the layout of the site
when certain conditions are
met.
• The CSS might look like this:
@media screen and (min-
width: 480px) { /*
..larger screen sizes
here.. */ }

Espacio de interacción.
UI design
• Optimize Screen Space
• Maximize Efficiency
• Preserve expected navigation behaviour
A good UX is NOT about
technology

UI design.
Optimize Screen Space
• Not everything users need to see can or should
be shown at once
• Navigating is time-consuming and uses are often
unsure of their choices
• Scrolling is not always appropriate
• Cath: users need to navigate to get more
information, but they don’t yet know what they
want more information about
– Solution: popup images and details

http://www.milliondollarhomepage.com
NO

Popup information …
what happens on touch screens ?

UI design. Maximize Efficiency
• Allow users to do more with less effort
– Popups reduce navigation
– Automated suggestions and history reduce
typing
– Appropriate widgets reduce interaction steps
(calendar popups for example)
– Scripted forms can eliminate opportunities for
errors (by adjusting choices)

Compra billete de avión
el día 21-julio-2016
No puedo escoger una
fecha de IDA anterior al
día actual

Compra billete de avión
el día 21-julio-2016
No puedo escoger una
fecha de REGRESO
anterior al día de la ida
(05/08/2016)


Reserva aparcamiento
en el aeropuerto de BCN
el día 15-marzo-2017
Puedo escoger una
fecha de SALIDA anterior
a la de entrada


UI design. Preserve expected navigation
behaviour
• Ensure that browser back and forward
buttons still do what users expect
– AJAX: most AJAX libraries allow control over
browser history (use it wisely)

Even the user can see that more
information on the bottom of the
page, it was no possible to
continue without clicking on the
button

una UI
Espacio de interacción
• Color
• Tipografía
• Iconos
• Menús
• Formularios

Color Theory for Designers
• The meaning of color
– https://www.smashingmagazine.com/2010/01/color-theory-for-
designers-part-1-the-meaning-of-color
• Understanding Concepts AndTerminology
– https://www.smashingmagazine.com/2010/02/color-theory-
for-designers-part-2-understanding-concepts-and-terminology
• ColorTheory For Designers: CreatingYour Own Color
Palettes
– https://www.smashingmagazine.com/2010/02/color-theory-
for-designer-part-3-creating-your-own-color-palettes
• Color Matters. http://www.colormatters.com

Developer’s Guide To Color
• Choosing A Base Color
• CreatingA Cohesive
Color Palette
• FindingYour Accent
• Adding the Gray
• Creating Harmonious
Grays
https://www.smashingmagazine.com/2016/04/web-developer-guide-color
bit.ly/2kbLiI9

El sistema visual. Recomendations
(guidelines). Example
NO
Bad color
combination
(text against
background)
worsened by
the size of
text.
SI

El sistema visual. Recomendations
(guidelines). BAD Example

Use “standard understandings”
• Typical feedback colors: success, warning,
error and informational

una UI
Color
• Tipografía
• Iconos
• Menús
• Formularios

Tipografía
• La buena tipografía
– soporta la estructura visual
– transmite el mensaje con mayor transparencia
– complementa el diseño visual
• La tipografía “habla” a los usuarios
– Visual language and typography, together, play a
play a tremendous role in influencing people’s emotions
people’s emotions
• Una mala elección conlleva problemas
(ver siguiente)

Tipografía, una mala elección conlleva
problemas
Shorter line lengths
slows comprehension as
the eye spends more time
tracking back to the next
line.
Letter-spacing set to -
4px, default and +4px
respectively
Logos, titles, book covers and other
larger texts often employ much tighter
tracking than any body text could
tolerate.
Body text legibility erodes quickly with reduced
tracking.
Font: https://www.sitepoint.com/typography-cheat-sheet

Typography Guidelines for Good Website Usability:
Legibility and Readability
1.Keep the number of fonts
used at a minimum
2.Use sans serif fonts instead
of serif for content
3.Ensure that proper text and
text size is used
4.Content must make use of
mixed capitalisation
5.Use standard fonts for web
site fonts
6.Character spacing should
not be minimised
7. Limit the use of different
colours for fonts
8. Do not use blue for content
9.Avoid colouring text in red or
green
10.Do not use the same or
similar colours for text and
background
11.Numbers having 5 digits or
more should have a thousand
separator
12.Do not use moving or
blinking text
Font: http://usabilitygeek.com/12-typography-guidelines-for-good-website-usability

Tipografía
• Web Fonts are Critical to the Online User
Experience - Don’t HurtYour Reader’s Eyes
• https://www.smashingmagazine.com/tag/typ
ography
• The UX of typography explained
– http://www.creativebloq.com/web-design/ux-
typography-explained-21619368

una UI
Color
Tipografía
• Iconos
• Menús
• Formularios

Tips for Designing with Icons
• Familiarize yourself with
– icons used by your competitors
&
– with icons commonly used
• For new icons:
– Keep the design simple and schematic
– Use the 5-second rule: if it takes you more than 5 seconds to think of an
appropriate icon for something, it is unlikely that an icon can effectively
communicate that meaning
– Test the icons for
• recognizability: ask people what they expect the icons to stand for.
• memorability: ask a repeat set of users if they can remember the icon’s meaning after
after being told what it represented a couple weeks earlier.
• And remember that:
– “Universal” Icons Are Rare & Icons Need aText Label
https://www.nngroup.com/articles/icon-usability
those will be most recognizable to
your users

Affordance & graphic methafors (icons)
• In the battle of clarity between icons and
labels, labels always win.
http://bokardo.com/archives/labels-always-win
Progressive Reduction:
http://layervault.tumblr.com/post/423615
66927/progressive-reduction
familiarity

Easy Steps To Better Icon Design
• Easy StepsTo Better Icon Design (by Scott
Lewis, May 11th, 2016)
• The Icon Handbook
• (google) Material icons
• Types of icons and their impact on the user
experience

una UI
Color
Tipografía
Iconos
• Menús
• Formularios

Menu Design. Checklist of 15 UX
Guidelines to Help Users
• Make It Visible
1. Don’t use tiny menus (or menu icons) on large
screens
2. Put menus in familiar locations
3. Make menu links look interactive
4. Ensure that your menus have enough visual
weight
5. Use link text colors that contrast with the
background color
https://www.nngroup.com/articles/menu-design

• Communicate the Current Location
6. Tell users ‘where’ the currently visible screen
located within the menu options
• Coordinate Menus with User Tasks
7. Use understandable link labels
8. Make link labels easy to scan
9. For large websites, use menus to let users
preview lower-level content
10.Provide local navigation menus for closely
related content
11.Leverage visual communication

• Make It Easy to Manipulate
12.Make menu links big enough to be
tapped or clicked
13.Ensure that drop-downs are not too
small or too big
14.Consider ‘sticky’ menus for long pages
15.Optimize for easy physical access to
frequently used command

una UI
Color
Tipografía
Iconos
Menús
• Formularios

Communication design. The Four
Dimensions of Tone of Voice
• A website’s tone of voice communicates how
an organization feels about its message.The
tone of any piece of content can be analyzed
along 4 dimensions: humor, formality,
respectfulness, and enthusiasm
https://www.nngroup.com/articles/tone-of-voice-dimensions

4 primary tone-of-voice dimensions
• Funny vs. serious: Is the writer trying to be humorous? Or is the subject
approached in a serious way? (Note that for our purposes, this
was only the attempt at humor. We didn’t evaluate if the writers
successfully landed their jokes.)
• Formal vs. casual: Is the writing formal? Informal? Casual? (Note that
casual and conversational are not necessarily synonymous, but they
often appear together.)
• Respectful vs. irreverent: Does the writer approach the subject in a
respectful way? Or does she take an irreverent approach? (In practice,
most irreverent tones are irreverent about the subject matter, in an
to set the brand apart from competitors. They are not usually
intentionally irreverent or offensive to the reader.)
• Enthusiastic vs. matter-of-fact: Does the writer seem to be enthusiastic
about the subject? Is the organization excited about the service or
product, or the information it conveys? Or is the writing dry and matter-
of-fact?

One Message, Many Possible Tones
• “We apologize, but we are
experiencing a problem.”
• “We’re sorry, but we’re
experiencing a problem on our end.”
– the message becomes more casual with a few small
changes:
• “We are” becomes “we’re”
• “Apologize” becomes “sorry”
• The addition of the expression “on our end”
a serious, formal,
respectful, and matter-of-
fact error message
the same message a
little more casual

One Message, Many Possible Tones
• “Oops!We’re sorry, but we’re experiencing a
problem on our end.”
• “What did you do!?You broke it! (Just kidding.
We’re experiencing a problem on our end.)”
Let’s add a little more enthusiasm
to the message
And now we’ve taken the error
message’s tone to casual and
enthusiastic.

una UI
Color
Tipografía
Iconos
Menús
Tono del mensaje
• Formularios

Forms Usability
Top 10 Recommendations
1. Keep it short
2. Visually group related labels and fields
3. Present fields in a single column layout
4. Use logical sequencing
5. Avoid placeholder text
6. Match fields to the type and size of the input
7. Distinguish optional and required fields
8. Explain any input or formatting requirements
9. Avoid Reset and Clear buttons
10. Provide highly visible and specific error messages
LECTURA: https://www.nngroup.com/articles/web-form-design

Índice
 Parte 1: Características Principales de una IU
 Elementos interactivos y simbología
 Consistencia
 Elementos de ubicación
 Navegación
 Identidad
 Parte 2: Elementos importantes en una UI
 Espacio de interacción
 Color
 Tipografía
 Iconos
 Menús
 Tono del mensaje
 Formularios

ADEMÁS,
aprender de la experiencia
• https://www.nngroup.com/articles/top-
intranet-trends

ADEMÁS,
• https://www.nngroup.com/articles/university-
sites

ADEMÁS,
• Better Interface Design: Logins, Menus,
Toggles And Other Fancy Modules, by Cosima
Mielke

Gracias por su
atención !!!
Toni Granollers
Escola Politècnica Superior
Universitat de Lleida (UdL)
C/ Jaume II, 69
25001 – Lleida (Catalonia)
(+34) 973 702750
antoni.granollers@udl.cat
@DCU_MPIUA
slideshare.net/DCU_MPIUA


@

Diseño de la interfaz de usuario

Más contenido relacionado

La actualidad más candente

Similar a Diseño de la interfaz de usuario

Más de DCU_MPIUA

Diseño de la interfaz de usuario

Notas del editor