MOOC UxIxD

Semana 2: UX

(c) V.M.G.B. 2015 - Galileo University

 User eXperience
Labelleza, el dinero y la tcnica
First things first > belleza > dinero > tcnica

UX es un trmino general que

abarca varios temas
> varios expertos
> alta probabilidad de errores
First things first > belleza > dinero > tcnica

Por qu UX?
Los errores en el diseo de
sitios Web pueden arruinar la
experiencia de usuarios con
estos sitios e incluso crear en
ellos una opinin negativa!

La mayora de errores de
usabilidad son errores de los
interfaces, o sea errores de
interaccin y/o contenido
First things first > belleza > dinero > tcnica

Beneficios de UX?

The $300 Million Button

Jared M. Spool (2009)

http://www.uie.com/articles/
three_hund_million_button/
First things first > belleza > dinero > tcnica

Beneficios de UX?

The $300 Million Button

Solucin:

Check out as a Guest or

Express Checkout

Ejemplo: REI.com
(http://digitalmarketer.com/content/uploads/
2013/11/shoppingcart4.jpg?
_ga=1.65076654.1831083933.1434989722)
First things first > belleza > dinero > tcnica

Diseo
Diseo grfico

es la comunicacin visual a travs de

un lenguaje visual (para transmitir
p.ej. sentimientos, informacin o una
metfora visual)

Componentes, definicin 1:

G=M+R+D+N

Graphic = message + redundancy

+ decoration + noise

mensaje + redundancia +
decoracin + ruido
First things first > belleza > dinero > tcnica

Diseo
Diseo grfico

Elementos para transmitir un mensaje,

definicin 1

bloques de construccin

layout

Bloques de construccin > elementos

bsicos: lines, shapes, mass, texture, and
color (grey-scale). Versin minimalista: line,
area, color.

Layout: comunicacin visual. Parmetros

relevantes de Layout: Balance, Proximity/Unity,
Alignment, Repetition/Consistency, Contrast,
Whitespace, Balance (symmetric, asymmetric,
radial), Rule of Thirds, Visual Center, Grids.
First things first > belleza > dinero > tcnica

Diseo: balance
First things first > belleza > dinero > tcnica

Diseo: proximidad/unidad
First things first > belleza > dinero > tcnica

Diseo: alineamiento
First things first > belleza > dinero > tcnica

Diseo: repeticin/
consistencia
First things first > belleza > dinero > tcnica

Diseo: contraste
First things first > belleza > dinero > tcnica

Diseo: whitespace
First things first > belleza > dinero > tcnica

Diseo: balance simtrico

First things first > belleza > dinero > tcnica

Diseo: balance asimtrico

First things first > belleza > dinero > tcnica

Diseo: balance radial

First things first > belleza > dinero > tcnica

Diseo: sin balance y

todava bonito???
First things first > belleza > dinero > tcnica

Diseo:
RECOMENDACIN !

La regla de los tercios!

First things first > belleza > dinero > tcnica

Diseo
Recomendacin: recuerden
esto para siempre!

The Rule Of Thirds is a rule of

thumb for visually composing
graphics, as e.g. design the
parts of a Web site. The rule is
said to be very comfortable
for humans.
See also: http://desource.uvu.edu/dgm/2740/IN/
steinja/lessons/03/l03_03.html

Check also out THE GOLDAN RATIO: http://

www.creativebloq.com/design/designers-guide-
golden-ratio-12121546
First things first > belleza > dinero > tcnica

e-Business (y UX)

Este subtema es solamente

una resea de un par de
trminos relevantes!
First things first > belleza > dinero > tcnica

e-Business (y UX)
Marketing vs branding

branding is who you

are (tu personalidad) = tu
promesa

marketing is what you

do (tus hbitos) = lo que
haces para hacer llegar tu
promesa

Branding es la estrategia,
marketing es la tctica!
First things first > belleza > dinero > tcnica

e-Business (y UX)
ROI: retorno de la inversin

Conversion rate (tasa de conversin)

Es el porcentaje de usuarios que

toman una accin deseada!

Ejemplo tpico: porcentaje de

visitantes de un sitio Web que ha
comprado algo en el sitio.

Ejemplo: http://seodml.com/wp-
content/uploads/2012/12/ Recomendacin de lectura:
conversion-rate-
infographic.png.pagespeed.png http://www.nngroup.com/articles/conversion-rates/
First things first > belleza > dinero > tcnica

e-Business (y UX)
Conversion rate (tasa de conversin)

Recomendaciones

Lectura: http://www.nngroup.com/articles/
conversion-rates/

SI :)

Fotos de productos suficientemente

grandes y detalladas

Aadir reviews (o comentarios de

usuarios) que sean robustos = escoger
aquellos que hablen de los beneficios del
producto!

Regalar cupones de promocin (o

descuentos) en base al uso individual de
la pgina = sorprende al usuario!
First things first > belleza > dinero > tcnica

e-Business (y UX)
Conversion rate (tasa de conversin)

Recomendaciones

NO :(

Descripciones de productos
pequeas o escondidas!

Dale una respuesta visible(!) al

usuario al aadir productos al
carruaje de compras.

Servicio al cliente sobrecargado.

NO abrumes al cliente con mucha
informacin. Resume tus servicios
de forma legible y prctica.
First things first > belleza > dinero > tcnica

e-Business (y UX)
Retargeting

En castellano: reorientacin?

Ojo: remarketing" es lo mismo!

Es publicidad online que puedes

utilizar luego que tus usuarios dejaron
tu sitio Web!

Converison rate basada en primera

visita = 2%

Conversion rate basada en primera

visita usando retargeting = hasta 98%

Una regla para orientacin:

de 7 a 12 visitas/usuario por mes
est bien!
First things first > belleza > dinero > tcnica

Software Development
El problema:
http://blog.thingsdesigner.com/uploads/id/
tree_swing_development_requirements.jpg
First things first > belleza > dinero > tcnica

Software Development

Una solucin..

The Nine Pillars of Successful

Web Teams

Jesse James Garrett

http://www.adaptivepath.com/
ideas/nine-pillars-of-successful-
web-teams/
First things first > belleza > dinero > tcnica

Software Development
The Nine Pillars of Successful
Web Teams

un proceso lineal..

ms que todo, una perspectiva

operativa sobre este concepto!

Pero esto no funciona siempre: la

produccin de software moderna
ya no es linear!!!!!
-> la solucin ms elegente es:
productividad continua

Recomendacin de lectura: http://

www.uxmatters.com/mt/archives/2011/08/the-integration-of-
user-experience-into-software-development.php
First things first > belleza > dinero > tcnica

Software Development
Otra solucin (mejor)

Productividad continua con mtodos

giles de desarrollo de software! P.ej.
SCRUM

Transparencia, time-boxing, sprints, one-

team/no-management, CROSS
FUNCTIONAL TEAMS(!), etc..

Recomendaciones de lectura: https://

uxmag.com/topics/agile-and-iterative-
process, http://www.nngroup.com/articles/
doing-ux-agile-world/

Ojo: tambin existe el trmino Lean UX,

pero solo es una informacin para los
curiosos :)
First things first > belleza > dinero > tcnica

Software Development
Good to know! (p los no-tcnicos)

El Internet y el Web son la misma

cosa! o no?

NO! El Web es solamente un

servicio que utiliza el Internet. Otros
servicios: Email, FTP, Skype,..

Web Site y Web Page y Homepage

son la misma cuestin! o no?

NO! UN sitio Web est compuesto

(por lo regular) de varias pgina
Web. La pgina Web
principal (inicio, portada,..) es
tu homepage, las otras no!
First things first > belleza > dinero > tcnica

Software Development
Good to know! (p los no-tcnicos)

Web Server es una computadora

especial para el Internet! o no?

NO! Un servidor Web es simplemente

un programa (cmo MS Word o
Photoshop), pero especializado para
servir sitios Web (contenidos, etc.)

Siempre se disean pginas Web! o

no?

NO! Esa trminologa se sigue

usando, pero ya no es correcta, entre
otros, por el uso tan intenso de AJAX
y tcnicas dinmicas para cargar
contenidos Web.. p.ej. Facebook!
First things first > belleza > dinero > tcnica

Software Development
Inovacin

The only sure way to avoid

making mistakes is to have no
new ideas!
Albert Einstein

Ni Apple reinventa la rueda!

http://designhooks.com/10-principles-of-good-
design-by-dieter-rams-in-todays-ui-design/

Just because your designs are unique does

not mean that they are useful!
First things first > belleza > dinero > tcnica

..y mucho ms!

pero este curso solamente es

una introduccin! :)