SlideShare a Scribd company logo
1 of 19
Los smartphones no son PC´s
Cuando uno se sienta por primera vez a diseñar una
web/app para dispositivos móviles, lo primero que
hacemos es tirarle todas las ideas y recursos que ya
dominamos y usamos más de una vez
De lo que no nos damos cuenta es que las habilidades que
tenemos son para diseñar otra cosa que se ve en una
pantalla más grande que mi mano, manejada con teclado
y un mouse.
Entre las principales características de los dispositivos
móviles que afectan al diseño encontramos:
Uso en exteriores
La luz del sol directa sobre la pantalla
afecta a la legibilidad y no podemos
confiar en que el usuario vaya buscar
una posición o lugar mejor para ver
nuestra App. El contraste entre los
elementos del diseño es clave.
Las pantallas son chicas
Por muy grande que sea la pantalla del
móvil siempre va a se más chica que la
de una computadora, se ven menos líneas
de texto y menos caracteres por línea.
Una imagen demasiado grande puede
lanzar el contenido por debajo de la línea
de scroll (sobre todo en las Blackberrys),
y en los dispositivos no-táctiles hacer
scroll…
Que hacemos con los Smartphones
Podemos consultar redes sociales, leer
el diario, escribir un mail, jugar un rato…
pero no vamos a crear un Excel o diseñar
en PhotoShop.
Mucha gente se cambia a la computadora
a la hora de registrarse en la App Store
cuando ve el formulario del iPhone.
Diseñar procesos o tareas que no
requieran mucho trabajo.
No disponemos de la atención del usuario
En cualquier momento puede entrar una
llamada, o llega el colectivo que estaba
esperando, también se termina la batería
o se pierda la cobertura.
Una vez que el usuario vuelve al
dispositivo tiene que quedar muy claro en
que punto se encontraba y qué estaba
haciendo.
No están optimizados para la entrada de datos
Los teclados son chicos e incompletos
Además no se pueden usar todos los
dedos y mucha gente usa los pulgares,
que son los que menos precisión tienen.
Siempre hay que optar por la selección
sobre la inserción de texto, y dar
opciones predefinidas cuando que sea
posible.
Se manejan con menor precisión
En los dispositivos con pantallas táctiles
se usan mucho los pulgares.
En los que tienen botones de dirección
(up, down, left & right) el foco salta a
determinados elementos.
Los que usan pad táctil o rueda son muy
sensibles y cualquier pequeño
desplazamiento del dedo genera un gran
desplazamiento en pantalla.
DECISIONES PREVIAS
¿PARA QUÉ DISPOSITIVOS?
Dentro del “mundo smartphone” existen
cientos de dispositivos diferentes que
varían en cuanto a tamaño, orientación y
resoluciones de pantalla, soporte de css
y javascript, detección de gestos y
posición, botones de hardware, etc.
Una buena solución es agrupar los
dispositivos por familias para cubrir las
3 o 4 opciones más comunes, y realizar
un diseño para cada una de ellas.
Lo habitual es hacer la agrupación atendiendo a las
características de interacción (táctil vs no táctil),
resoluciones de pantalla, sistemas operativos.
APLICACIÓN… WEB…
No podremos aplicar la misma gráfica de una aplicación a una
web, hay que tener mucho cuidado con el peso de las imágenes,
aún quedan muchas zonas donde no llega la cobertura 3G.
GH 2011
Votar es fácil, hacé clic sobre las imágenes y listoVotar es fácil, hacé clic sobre las imágenes y listo

More Related Content

What's hot

HMI (Human Machine Interaction) key note- Carlos Díaz
HMI (Human Machine Interaction) key note- Carlos DíazHMI (Human Machine Interaction) key note- Carlos Díaz
HMI (Human Machine Interaction) key note- Carlos DíazUX Nights
 
Analisis sistemico del radio
Analisis sistemico del radioAnalisis sistemico del radio
Analisis sistemico del radiolizethmtz01
 
Tablets
TabletsTablets
Tabletsviher7
 
Articulo compus
Articulo compusArticulo compus
Articulo compussolcha1809
 
Presentación pantallas táctiles
Presentación pantallas táctilesPresentación pantallas táctiles
Presentación pantallas táctiles3ronaturales011
 
Arquitectura de smartphones y tables 1
Arquitectura de smartphones y tables 1Arquitectura de smartphones y tables 1
Arquitectura de smartphones y tables 1diego martínez
 
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?DNRstudios
 
Presentación - Las Tabletas
Presentación - Las TabletasPresentación - Las Tabletas
Presentación - Las TabletasIntComp-ULS
 
Introducción al desarrollo y diseño de aplicaciones móviles
Introducción al desarrollo y diseño de aplicaciones móvilesIntroducción al desarrollo y diseño de aplicaciones móviles
Introducción al desarrollo y diseño de aplicaciones móvilesAngelo Tadres
 

What's hot (10)

Smarphones
SmarphonesSmarphones
Smarphones
 
HMI (Human Machine Interaction) key note- Carlos Díaz
HMI (Human Machine Interaction) key note- Carlos DíazHMI (Human Machine Interaction) key note- Carlos Díaz
HMI (Human Machine Interaction) key note- Carlos Díaz
 
Analisis sistemico del radio
Analisis sistemico del radioAnalisis sistemico del radio
Analisis sistemico del radio
 
Tablets
TabletsTablets
Tablets
 
Articulo compus
Articulo compusArticulo compus
Articulo compus
 
Presentación pantallas táctiles
Presentación pantallas táctilesPresentación pantallas táctiles
Presentación pantallas táctiles
 
Arquitectura de smartphones y tables 1
Arquitectura de smartphones y tables 1Arquitectura de smartphones y tables 1
Arquitectura de smartphones y tables 1
 
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
 
Presentación - Las Tabletas
Presentación - Las TabletasPresentación - Las Tabletas
Presentación - Las Tabletas
 
Introducción al desarrollo y diseño de aplicaciones móviles
Introducción al desarrollo y diseño de aplicaciones móvilesIntroducción al desarrollo y diseño de aplicaciones móviles
Introducción al desarrollo y diseño de aplicaciones móviles
 

Viewers also liked

Diario La Huella de Nuestra Señora de Lourdes La Plata
Diario La Huella de Nuestra Señora de Lourdes La PlataDiario La Huella de Nuestra Señora de Lourdes La Plata
Diario La Huella de Nuestra Señora de Lourdes La PlataEl Arcón de Clio
 
Guia optimizacion motores_busqueda
Guia optimizacion motores_busquedaGuia optimizacion motores_busqueda
Guia optimizacion motores_busquedaJosé M. Padilla
 
La evaluación al servicio del que aprende. tarea módulo 5
La evaluación al servicio del que aprende. tarea módulo 5La evaluación al servicio del que aprende. tarea módulo 5
La evaluación al servicio del que aprende. tarea módulo 587880404
 
Acciones probadas de exito
Acciones probadas de exitoAcciones probadas de exito
Acciones probadas de exitoSergio Otero
 
Taller el tesoro de antioquia
Taller el tesoro de antioquiaTaller el tesoro de antioquia
Taller el tesoro de antioquiaJacobo Malowany
 
Modelos pedagogicos
Modelos pedagogicosModelos pedagogicos
Modelos pedagogicosjhon
 
Presentación Dr. Omar Fumero
Presentación Dr. Omar FumeroPresentación Dr. Omar Fumero
Presentación Dr. Omar Fumerodoctorando
 
Actividad Ciencias Fisica 1er año
Actividad Ciencias Fisica 1er añoActividad Ciencias Fisica 1er año
Actividad Ciencias Fisica 1er añomalaclau
 
Repaso 3 mat_quinto
Repaso 3 mat_quintoRepaso 3 mat_quinto
Repaso 3 mat_quintoFiz
 
Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez
Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez
Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez didache
 
2900 pronunciamiento ci proyecto ley de inversiones públicas exp 19331
2900 pronunciamiento ci proyecto ley de inversiones públicas  exp 19331  2900 pronunciamiento ci proyecto ley de inversiones públicas  exp 19331
2900 pronunciamiento ci proyecto ley de inversiones públicas exp 19331 Freelance
 
Compensacion por tiempo de servicios
Compensacion por tiempo de serviciosCompensacion por tiempo de servicios
Compensacion por tiempo de serviciosUNT
 
Diapo
DiapoDiapo
DiapoMo Ci
 

Viewers also liked (20)

Los pronombres 3
Los pronombres 3Los pronombres 3
Los pronombres 3
 
Diario La Huella de Nuestra Señora de Lourdes La Plata
Diario La Huella de Nuestra Señora de Lourdes La PlataDiario La Huella de Nuestra Señora de Lourdes La Plata
Diario La Huella de Nuestra Señora de Lourdes La Plata
 
Guia optimizacion motores_busqueda
Guia optimizacion motores_busquedaGuia optimizacion motores_busqueda
Guia optimizacion motores_busqueda
 
La evaluación al servicio del que aprende. tarea módulo 5
La evaluación al servicio del que aprende. tarea módulo 5La evaluación al servicio del que aprende. tarea módulo 5
La evaluación al servicio del que aprende. tarea módulo 5
 
Visión
VisiónVisión
Visión
 
Estructuras i
Estructuras iEstructuras i
Estructuras i
 
Acciones probadas de exito
Acciones probadas de exitoAcciones probadas de exito
Acciones probadas de exito
 
Taller el tesoro de antioquia
Taller el tesoro de antioquiaTaller el tesoro de antioquia
Taller el tesoro de antioquia
 
Modelos pedagogicos
Modelos pedagogicosModelos pedagogicos
Modelos pedagogicos
 
Presentación Dr. Omar Fumero
Presentación Dr. Omar FumeroPresentación Dr. Omar Fumero
Presentación Dr. Omar Fumero
 
Actividad Ciencias Fisica 1er año
Actividad Ciencias Fisica 1er añoActividad Ciencias Fisica 1er año
Actividad Ciencias Fisica 1er año
 
Kico's Stairway to Phd
Kico's Stairway to PhdKico's Stairway to Phd
Kico's Stairway to Phd
 
Repaso 3 mat_quinto
Repaso 3 mat_quintoRepaso 3 mat_quinto
Repaso 3 mat_quinto
 
Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez
Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez
Portafolio de evaluación Innovación Educativa con REA Carmen Ramírez
 
2900 pronunciamiento ci proyecto ley de inversiones públicas exp 19331
2900 pronunciamiento ci proyecto ley de inversiones públicas  exp 19331  2900 pronunciamiento ci proyecto ley de inversiones públicas  exp 19331
2900 pronunciamiento ci proyecto ley de inversiones públicas exp 19331
 
Compensacion por tiempo de servicios
Compensacion por tiempo de serviciosCompensacion por tiempo de servicios
Compensacion por tiempo de servicios
 
El eco de la vida
El eco de la vidaEl eco de la vida
El eco de la vida
 
E Commerce
E CommerceE Commerce
E Commerce
 
Diapo
DiapoDiapo
Diapo
 
1punto4
1punto41punto4
1punto4
 

Similar to App

Arquitectura de smartphone y de tablet (1)
Arquitectura de smartphone y de tablet (1)Arquitectura de smartphone y de tablet (1)
Arquitectura de smartphone y de tablet (1)karen cordova
 
La tecnología táctil
La tecnología táctilLa tecnología táctil
La tecnología táctilRoxy Dmnguz
 
La interacción social dentro de 10 años
La interacción social dentro de 10 añosLa interacción social dentro de 10 años
La interacción social dentro de 10 añosAlbertoSM12
 
La tecnología táctil
La tecnología táctilLa tecnología táctil
La tecnología táctilRoxy Dmnguz
 
Alejo duque act 2
Alejo duque act 2Alejo duque act 2
Alejo duque act 2juliedo41
 
6 inventos inovadores para tu teléfono inteligente
6 inventos inovadores para tu teléfono inteligente6 inventos inovadores para tu teléfono inteligente
6 inventos inovadores para tu teléfono inteligenteAntonio Polla Grande
 
5.6 Usabilidad en el móvil
5.6 Usabilidad en el móvil5.6 Usabilidad en el móvil
5.6 Usabilidad en el móvilBrox Technology
 
"Tablets" Francisca Briones Lazo.
"Tablets" Francisca Briones Lazo."Tablets" Francisca Briones Lazo.
"Tablets" Francisca Briones Lazo.IAB Chile
 
UX heuristics
UX heuristicsUX heuristics
UX heuristicsbetabeers
 
5.1 Las tres diferencias
5.1 Las tres diferencias5.1 Las tres diferencias
5.1 Las tres diferenciasBrox Technology
 
UXday2017. Mejores prácticas en mobile. Francis Restoy
UXday2017. Mejores prácticas en mobile. Francis RestoyUXday2017. Mejores prácticas en mobile. Francis Restoy
UXday2017. Mejores prácticas en mobile. Francis RestoyMultiplica
 

Similar to App (20)

Arquitectura de smartphone y de tablet (1)
Arquitectura de smartphone y de tablet (1)Arquitectura de smartphone y de tablet (1)
Arquitectura de smartphone y de tablet (1)
 
La tecnología táctil
La tecnología táctilLa tecnología táctil
La tecnología táctil
 
La interacción social dentro de 10 años
La interacción social dentro de 10 añosLa interacción social dentro de 10 años
La interacción social dentro de 10 años
 
Utzaropa documentacion
Utzaropa documentacionUtzaropa documentacion
Utzaropa documentacion
 
La tecnología táctil
La tecnología táctilLa tecnología táctil
La tecnología táctil
 
Alejo duque act 2
Alejo duque act 2Alejo duque act 2
Alejo duque act 2
 
Utzaropa documentacion
Utzaropa documentacionUtzaropa documentacion
Utzaropa documentacion
 
6 inventos inovadores para tu teléfono inteligente
6 inventos inovadores para tu teléfono inteligente6 inventos inovadores para tu teléfono inteligente
6 inventos inovadores para tu teléfono inteligente
 
5.6 Usabilidad en el móvil
5.6 Usabilidad en el móvil5.6 Usabilidad en el móvil
5.6 Usabilidad en el móvil
 
Uso correctos del computador.
Uso correctos del computador. Uso correctos del computador.
Uso correctos del computador.
 
"Tablets" Francisca Briones Lazo.
"Tablets" Francisca Briones Lazo."Tablets" Francisca Briones Lazo.
"Tablets" Francisca Briones Lazo.
 
UX heuristics
UX heuristicsUX heuristics
UX heuristics
 
Desarrollo web movil
Desarrollo web movilDesarrollo web movil
Desarrollo web movil
 
5.1 Las tres diferencias
5.1 Las tres diferencias5.1 Las tres diferencias
5.1 Las tres diferencias
 
4º A
4º A4º A
4º A
 
UXday2017. Mejores prácticas en mobile. Francis Restoy
UXday2017. Mejores prácticas en mobile. Francis RestoyUXday2017. Mejores prácticas en mobile. Francis Restoy
UXday2017. Mejores prácticas en mobile. Francis Restoy
 
Byronkronos
ByronkronosByronkronos
Byronkronos
 
Byronkronos
ByronkronosByronkronos
Byronkronos
 
Tecnología táctil
Tecnología táctilTecnología táctil
Tecnología táctil
 
tecnologias
tecnologiastecnologias
tecnologias
 

App

  • 1.
  • 2. Los smartphones no son PC´s
  • 3. Cuando uno se sienta por primera vez a diseñar una web/app para dispositivos móviles, lo primero que hacemos es tirarle todas las ideas y recursos que ya dominamos y usamos más de una vez De lo que no nos damos cuenta es que las habilidades que tenemos son para diseñar otra cosa que se ve en una pantalla más grande que mi mano, manejada con teclado y un mouse.
  • 4. Entre las principales características de los dispositivos móviles que afectan al diseño encontramos:
  • 5. Uso en exteriores La luz del sol directa sobre la pantalla afecta a la legibilidad y no podemos confiar en que el usuario vaya buscar una posición o lugar mejor para ver nuestra App. El contraste entre los elementos del diseño es clave.
  • 6. Las pantallas son chicas Por muy grande que sea la pantalla del móvil siempre va a se más chica que la de una computadora, se ven menos líneas de texto y menos caracteres por línea. Una imagen demasiado grande puede lanzar el contenido por debajo de la línea de scroll (sobre todo en las Blackberrys), y en los dispositivos no-táctiles hacer scroll…
  • 7. Que hacemos con los Smartphones Podemos consultar redes sociales, leer el diario, escribir un mail, jugar un rato… pero no vamos a crear un Excel o diseñar en PhotoShop. Mucha gente se cambia a la computadora a la hora de registrarse en la App Store cuando ve el formulario del iPhone. Diseñar procesos o tareas que no requieran mucho trabajo.
  • 8. No disponemos de la atención del usuario En cualquier momento puede entrar una llamada, o llega el colectivo que estaba esperando, también se termina la batería o se pierda la cobertura. Una vez que el usuario vuelve al dispositivo tiene que quedar muy claro en que punto se encontraba y qué estaba haciendo.
  • 9. No están optimizados para la entrada de datos Los teclados son chicos e incompletos Además no se pueden usar todos los dedos y mucha gente usa los pulgares, que son los que menos precisión tienen. Siempre hay que optar por la selección sobre la inserción de texto, y dar opciones predefinidas cuando que sea posible.
  • 10. Se manejan con menor precisión En los dispositivos con pantallas táctiles se usan mucho los pulgares. En los que tienen botones de dirección (up, down, left & right) el foco salta a determinados elementos. Los que usan pad táctil o rueda son muy sensibles y cualquier pequeño desplazamiento del dedo genera un gran desplazamiento en pantalla.
  • 12. ¿PARA QUÉ DISPOSITIVOS? Dentro del “mundo smartphone” existen cientos de dispositivos diferentes que varían en cuanto a tamaño, orientación y resoluciones de pantalla, soporte de css y javascript, detección de gestos y posición, botones de hardware, etc. Una buena solución es agrupar los dispositivos por familias para cubrir las 3 o 4 opciones más comunes, y realizar un diseño para cada una de ellas. Lo habitual es hacer la agrupación atendiendo a las características de interacción (táctil vs no táctil), resoluciones de pantalla, sistemas operativos.
  • 13. APLICACIÓN… WEB… No podremos aplicar la misma gráfica de una aplicación a una web, hay que tener mucho cuidado con el peso de las imágenes, aún quedan muchas zonas donde no llega la cobertura 3G.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. Votar es fácil, hacé clic sobre las imágenes y listoVotar es fácil, hacé clic sobre las imágenes y listo