Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
OS TRES PES DA WEB
Óscar Otero - FEED 2015
ACCESIBILIDADE
INTERACTIVIDADE
TIPOGRAFÍA
ACCESIBILIDADE
A web naceu para
solucionar un problema
de accesibilidade
Crea unha vez.
Accede dende calquera sitio
O deseño debe solventar
problemas sen crear
outros novos
A accesibilidade é o
primeiro paso para unha
boa experiencia de
usuario
Non se pode conseguir unha experiencia de
usuario monolítica
Demasiadas variables
técnicas:
Tamaño de pantalla
Tipo de control (teclado, rato, táctil, etc)
Sistema Operativo
Navegador...
Todos somos
discapacitados dalgun
xeito:
Poucos coñecementos informáticos
Problemas cognitivos
Problemas físicos (visión, ...
...ou nalgún momento:
Rompín un brazo
Non hai moita cobertura
Hai moito ruído
Estou quedando sen batería
Non hai moita vis...
A clave esta en
proporcionar a
experiencia adecuada en
cada caso
Que cousas perxudican a
accesibilidade?
Páxinas grandes e pesadas
Linguaxe pouco entendible
Contraste de cores, tratamento tipográfico,
etc.
Requerimentos técnicos
A mellor estratexia é
poñerse sempre no peor
dos casos
O exemplo de Netflix
The stack (a pila):
https://vimeo.com/140261016
https://vimeo.com/140261015
Offline first
A accesibilidade tamén
nos beneficia de cara a
fora
Contido
enriquecido nas
redes sociais
(opengraph)
Contido enriquecido nos buscadores
(microformatos)
Gardar favoritos no móbil
Gardar favoritos
en windows
Cada canle de
accesibilidade ten o seu
público
INTERACTIVIDADE
As convencións axudan a
simplificar as interfaces
A aparición dos móbiles
para navegar pola web
tamén axudou
A boa interface reside
nos detalles
Charles Earmes:
“Non son solo detalles, son o deseño”
Son o que fan que un sitio que “soportas” se
convirta nun sitio “que adoras”
As microinteraccións:
Cada unha controla unha tarefa (e solo unha)
específica da web
A maioría deben ser invisibles para o...
Exemplos:
Activar/desactivar preferencias
Deixar un comentario
Loguearse
Ver unha notificación
Compartir un elemento
Exemplo:
Crear nova carpeta
en instapaper
Dan Saffer
escribiu un libro
“Microinteractions”
O trigger é o que inicia a
interacción
Pode ser visible e interactivo
por exemplo, un botón
Trigger invisible
combinación de teclas, un xesto, etc
Autocompletado de youtube
Combinación de teclas
Trigger do sistema
Unha notificación
Trigger do sistema
Outro exemplo
Rules: definen o
comportamento da
interacción, as normas
que o rixen
Non empeces de
cero
Shopify: segundo a IP, enche
automaticamente a dirección
Exempo de
lóxica
Botón engadir ao carro da
compra
Feedback: informan
ao usuario do que esta
pasando
Feedback: O sitio ideal
para humanizar produtos
Comunicación de persoa a persoa
Feedback: Axuda a entender a interacción
http://photojojo.com/store/awesomeness/pocket-spotlight/
Feedback:
Un toque de
humor pode
ven ben
Actividade privada en
Discus
Exemplos: (paxinas 404)
http://www.lego.com/404notfound
Exemplos: (paxinas 404)
http://www.npr.org/templates/story/story.php?storyId=404
Loop: é o que nos
permite ver esta
interaccion ao longo do
tempo
Loop: axudan a conseguir
o que Brandon Schauer
chama “The long wow”
Repitese ou só pasa unha vez?
Loop:
Que pasa a segunda vez que se repite?
Remember me
E a vez número 100?
As microinteraccións teñen memoria
E tamén poden estar ao tanto da actualidade
TIPOGRAFÍA
2006
Web design is 95%
typography
(Oliver Reichenstein)
2012
Typography is the
foundation of web design
(Paul Scrivens)
Tipografía para pantalla
Como lemos?
O ollo, cando vai lendo vai facendo pequenos saltos, non fai un barrido contínuo.
Non se trata de buscar o
tipo adecuado senón de
usar a tipografía como
interface de usuario
Medium:
Tipografía do sistema como interface de usuario
A maioría das tipografías
foron deseñadas primeiro
en alta resolución e logo
adaptadas a pantalla
O hinting adapta a forma
da tipografía a distintos
tamaños para que se
vexa ben a distinta
resolución
https://www.typotheque.com/articles/hinting
O hinting non é unha
práctica moi común
É un traballo tedioso, que consume moito
tempo e sempre se creeu que quedaría
obso...
verdana
Quizáis a tipografía que máis traballo se
dedicou en optimizar
Cada caracter ten axustes para imprimirse
correctam...
Pero o hinting só
funciona nalguns casos,
xa que cada sistema
operativo é distinto:
A filosofía de apple
Respetar ao máximo a forma orixinal da
tipografía, polo que non usa a información de
hinting nin a di...
A filosofía de microsoft
Axustar ao máximo a forma da tipografía
á grella de pixels, polo que distorsiona a
información, x...
A filosofía de linux
Intentar facer as dúas cousas á vez, esta a
medio camiño entre mac e windows.
MOITAS GRAZAS
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Os tres pes da web
Prochain SlideShare
Chargement dans…5
×

Os tres pes da web

716 vues

Publié le

Imaxes da conferencia de Oscar Otero no FEED 2015 celebrado na Coruña

Publié dans : Design
  • Soyez le premier à commenter

Os tres pes da web

  1. 1. OS TRES PES DA WEB Óscar Otero - FEED 2015
  2. 2. ACCESIBILIDADE INTERACTIVIDADE TIPOGRAFÍA
  3. 3. ACCESIBILIDADE
  4. 4. A web naceu para solucionar un problema de accesibilidade
  5. 5. Crea unha vez. Accede dende calquera sitio
  6. 6. O deseño debe solventar problemas sen crear outros novos
  7. 7. A accesibilidade é o primeiro paso para unha boa experiencia de usuario
  8. 8. Non se pode conseguir unha experiencia de usuario monolítica
  9. 9. Demasiadas variables técnicas: Tamaño de pantalla Tipo de control (teclado, rato, táctil, etc) Sistema Operativo Navegador usado Versión do navegador Conexión a internet Memoria RAM Tarxeta gráfica
  10. 10. Todos somos discapacitados dalgun xeito: Poucos coñecementos informáticos Problemas cognitivos Problemas físicos (visión, mobilidade, etc)
  11. 11. ...ou nalgún momento: Rompín un brazo Non hai moita cobertura Hai moito ruído Estou quedando sen batería Non hai moita visibilidade
  12. 12. A clave esta en proporcionar a experiencia adecuada en cada caso
  13. 13. Que cousas perxudican a accesibilidade?
  14. 14. Páxinas grandes e pesadas
  15. 15. Linguaxe pouco entendible
  16. 16. Contraste de cores, tratamento tipográfico, etc.
  17. 17. Requerimentos técnicos
  18. 18. A mellor estratexia é poñerse sempre no peor dos casos
  19. 19. O exemplo de Netflix The stack (a pila): https://vimeo.com/140261016 https://vimeo.com/140261015
  20. 20. Offline first
  21. 21. A accesibilidade tamén nos beneficia de cara a fora
  22. 22. Contido enriquecido nas redes sociais (opengraph)
  23. 23. Contido enriquecido nos buscadores (microformatos)
  24. 24. Gardar favoritos no móbil
  25. 25. Gardar favoritos en windows
  26. 26. Cada canle de accesibilidade ten o seu público
  27. 27. INTERACTIVIDADE
  28. 28. As convencións axudan a simplificar as interfaces
  29. 29. A aparición dos móbiles para navegar pola web tamén axudou
  30. 30. A boa interface reside nos detalles Charles Earmes: “Non son solo detalles, son o deseño”
  31. 31. Son o que fan que un sitio que “soportas” se convirta nun sitio “que adoras”
  32. 32. As microinteraccións: Cada unha controla unha tarefa (e solo unha) específica da web A maioría deben ser invisibles para o usuario É o complemento do que se chama “big picture” e controlan os momentos específicos na interacción.
  33. 33. Exemplos: Activar/desactivar preferencias Deixar un comentario Loguearse Ver unha notificación Compartir un elemento
  34. 34. Exemplo: Crear nova carpeta en instapaper
  35. 35. Dan Saffer escribiu un libro “Microinteractions”
  36. 36. O trigger é o que inicia a interacción
  37. 37. Pode ser visible e interactivo por exemplo, un botón
  38. 38. Trigger invisible combinación de teclas, un xesto, etc
  39. 39. Autocompletado de youtube
  40. 40. Combinación de teclas
  41. 41. Trigger do sistema Unha notificación
  42. 42. Trigger do sistema Outro exemplo
  43. 43. Rules: definen o comportamento da interacción, as normas que o rixen
  44. 44. Non empeces de cero Shopify: segundo a IP, enche automaticamente a dirección
  45. 45. Exempo de lóxica Botón engadir ao carro da compra
  46. 46. Feedback: informan ao usuario do que esta pasando
  47. 47. Feedback: O sitio ideal para humanizar produtos Comunicación de persoa a persoa
  48. 48. Feedback: Axuda a entender a interacción http://photojojo.com/store/awesomeness/pocket-spotlight/
  49. 49. Feedback: Un toque de humor pode ven ben Actividade privada en Discus
  50. 50. Exemplos: (paxinas 404) http://www.lego.com/404notfound
  51. 51. Exemplos: (paxinas 404) http://www.npr.org/templates/story/story.php?storyId=404
  52. 52. Loop: é o que nos permite ver esta interaccion ao longo do tempo
  53. 53. Loop: axudan a conseguir o que Brandon Schauer chama “The long wow”
  54. 54. Repitese ou só pasa unha vez?
  55. 55. Loop: Que pasa a segunda vez que se repite?
  56. 56. Remember me
  57. 57. E a vez número 100?
  58. 58. As microinteraccións teñen memoria
  59. 59. E tamén poden estar ao tanto da actualidade
  60. 60. TIPOGRAFÍA
  61. 61. 2006 Web design is 95% typography (Oliver Reichenstein)
  62. 62. 2012 Typography is the foundation of web design (Paul Scrivens)
  63. 63. Tipografía para pantalla
  64. 64. Como lemos? O ollo, cando vai lendo vai facendo pequenos saltos, non fai un barrido contínuo.
  65. 65. Non se trata de buscar o tipo adecuado senón de usar a tipografía como interface de usuario
  66. 66. Medium: Tipografía do sistema como interface de usuario
  67. 67. A maioría das tipografías foron deseñadas primeiro en alta resolución e logo adaptadas a pantalla
  68. 68. O hinting adapta a forma da tipografía a distintos tamaños para que se vexa ben a distinta resolución
  69. 69. https://www.typotheque.com/articles/hinting
  70. 70. O hinting non é unha práctica moi común É un traballo tedioso, que consume moito tempo e sempre se creeu que quedaría obsoleto unha tipo de 256 caracteres consume polo menos unhas 80 horas (Peter Bilak)
  71. 71. verdana Quizáis a tipografía que máis traballo se dedicou en optimizar Cada caracter ten axustes para imprimirse correctamente en todos os tamaños dende 9 ata 60pt. Ten caracteres suficientes para soportar unha gran variedade de idiomas (uns 900 caracteres aproximadamente)
  72. 72. Pero o hinting só funciona nalguns casos, xa que cada sistema operativo é distinto:
  73. 73. A filosofía de apple Respetar ao máximo a forma orixinal da tipografía, polo que non usa a información de hinting nin a distorsiona
  74. 74. A filosofía de microsoft Axustar ao máximo a forma da tipografía á grella de pixels, polo que distorsiona a información, xeralmente a tipo vese máis light ou bold e máis enfocada (incluso pixelada). O hinting sí que se usa para afinar ao máximo esa distorsión.
  75. 75. A filosofía de linux Intentar facer as dúas cousas á vez, esta a medio camiño entre mac e windows.
  76. 76. MOITAS GRAZAS

×