las soluciones de hoy Victor Pezzetti + Sergio Quaroni (UTN Rosario)
@vpezzetti
Víctor Pezzetti y Sergio Quaroni Ingenieros en Sistemas de Información
Docentes cátedra Diseo de Sistemas de !arrera "ng
en Sistemas de "n#ormaci$n% UTN Rosario (+ &' aos)
Desarroadores de apicaciones% con #oco en e usuario
 ctuamente reestructurando contenidos de a materia%
en Usa*iidad U,
 
0 2structura de un Patr$n
0 Para -u. os puedo usar 
0 Patrones a di#erentes nivees 0 contenido 0 navegaci$n 0 estructura de a página (aout) 0 m$vies
0 !oncusiones
!omencemos de#iniendo333
4un patr$n de diseo es una souci$n a un
pro*ema -ue se usa repetidamente en
contextos similares con agunas
variantes en a impementaci$n5
Patrones
 Alexander, para diseño y construcción
urbanística
Váidos a trav.s de di#erentes pata#ormas
Productos% no procesos
Sugerencias% no re-uerimientos
 daptados a cada conte6to de diseo
Patrones – ¿qu son!
7as guías descri*en regas generaes a seguir3
7os patrones especi#ican -u. /acer para conseguir
un o"#etivo concreto% en un contexto determinado3
8ediante explicaciones  ejemplos% especi#ican
cu$ndo% c%mo  por qu puede apicarse a souci$n3
&i'erencia entre (uías y Patrones de )nter'az
 
 
"nspiraci$n
 
&3 :rganizar e !ontenido
>3 :rganizar a Página (aout)
?3 8ostrar 7istas
3 29ecutar cciones
C3 Usar Socia 8edia
3 Voverse 8ovi
?3 8ostrar 7istas
3 29ecutar cciones
C3 Usar Socia 8edia
Una pgina tendrá aguno de estos o*9etivosE
&3 8ostrar una Fnica cosa (mapa% i*ro% etc)
=3 8ostrar varias cosas
?3 Gaciitar una tarea
Poniendo la casa en orden
 
 ternative VieHs presentar contenido desde varios puntos de vista
8an IorJspaces ver más de un contenido o documento a mismo tiempo
Poniendo la casa en orden
 
=3 PTR:N2S para 48ostrar varias cosas5
Geature% Searc/% and KroHse mostrar productos o contenido% permitir a navegaci$n a *Fs-ueda
de 1tems3 :#reciendo un atractor en a #ront page
NeHs Stream contenidos dinámicamente creados%
mostrando e más reciente arri*a de todo
Poniendo la casa en orden
Picture 8anager  para mane9ar imágenes
 
>3 PTR:N2S para 4Lerramientas para crear ago5
!anvas Pus Paette Presenta paeta ic$nica 9unto a un ienzo *anco (canvas)3
2 usuario crea o*9etos en e ienzo% ci-ueando *otones de a
paeta3
!hotoshop CS"  #ac!aint, circa $%&'
Iizard !uando se -uiere dividir a tarea en pasos
pe-ueos
No es una tarea pasoMaMpaso3
7a inter#az da acceso a os usuarios a una ampia variedad
de opciones permite cam*iar soo as necesarias
Poniendo la casa en orden
 
&3 ;Donde esto< (signposts)
a) Kuena seaizaci$n
*) Pistas
PTR:N2S para no desorientarse
Sitemap Gooter  U*icar un mapa de sitio en e #ooter de cada
página3 De*e ocupar un espacio compacto3
Paseando por el "arrio
/asta egar a a /ome
 
 
!ear 2ntr Points Usar pocas amadas -ue inciten a actuar 
8oda Pane 8ostrar una Fnica página% sin
ningFn otro tipo de navegaci$n
/asta /a*er #inaizado a tarea
Paseando por el "arrio
2scape Latc/ 2n pantaas con navegaci$n imitada% u*icar
un inJ -ue sa-ue a usuario de a pantaa
/acia un ugar conocido3
5ítulos
Peque6os
items
Posici$n + Tamao Ritmo
contenedores
 
*ada cosa en su lugar 
)a secuencia de pasos para completar la tarea, que se detecta al primer *ista+o
Puntos focales son reas irresistibles
 para los ojos del usuario
Llamadas a la Accion - dentro y fuera del flujo
Botón de Confirmación
PTR:N2S para Oerar-u1a Visua
Visua GrameHorJ Disear cada página para usar mismo aout%
coores eementos de estio% pero con su#iciente
#e6i*iidad para mane9ar contenido varia*e3
!enter Stage !oocar e área principa en a
maor secci$n de a ventana%
agrupando /erramientas
más pe-ueos
 
Tited Sections De#inir secciones% cada
una con un t1tuo
destacado3
8odue Ta*s !oocar os m$duos en e área de
soapas para -ue sea visi*e un
m$duo por vez3
*ada cosa en su lugar 
 ccordion U*icar m$duos en una pia de panees% -ue pueden ser
a*iertos cerrados% de manera independiente3
 
PTR:N2S para Gu9o Visua
Rig/t7e#t ignment   disear un #ormuario% 9usti#icar
eti-uetas a derec/a campos a iz-uierda
Diagona Kaance Distri*uir eementos de manera *aanceada%
coocando peso visua en es-uinas superiorMiz-uierda
e in#eriorMderec/a
 
=3 ran variedad de anc/os de pantaa
>3 Pantaas tácties
?3 Di#icutad para ingresar te6to
3 2ntornos #1sicos desa#iantes
A3 "n#uencias sociaes atenci$n imitada
8l movimiento se demuestra andando
 
nunca se portan3
usuarios os *ene#icios -ue e medio
tiene para o#recer5
8l movimiento se demuestra andando
 
=3 4Desvista5 e sitio /asta egar a su esencia
>3 Utiice e /ardHare de dispositivo
?3 Laga -ue e contenido sea inea
3 :ptimice as secuencias más comunes
8l movimiento se demuestra andando
 
Vertica StacJ :rdenar e contenido de as páginas
m$vies en una coumna vertica% con
poco o ningFn uso de eementos ateraes
Kottom Navigation U*icar os *otones de navegaci$n en a
*ase de a página
Te6t !ear Kutton 7impiar un campo con s$opresionar un
*ot$n
16ennifer 7id8ell5
9i"liogra'ia esencial
Para "uscar en la :e"
Ieie /ttpEHHH3Heie3com  
a/oo /ttpEdeveoper3a/oo3compatterns 
"n#ragistics /ttpE-uince3in#ragistics3com 
Designing Socia "nter#aces M /ttpEHHH3designingsociainter#aces3com 
 ndroid M /ttpEHHH3androiduipatterns3com 
muc/o mássssss
No de9e de competar su evauaci$n onine
ux.;+.comar<encuesta
V1ctor Pezzetti + Sergio Quaroni (UTN Rosario)
vpezzetti@gmai3com