Successfully reported this slideshow.

Os tres pes da web

1

Share

Loading in …3
×
1 of 89
1 of 89

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

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

×