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

1. OS TRES PES DA WEB
Óscar Otero - FEED 2015

2. ACCESIBILIDADE
INTERACTIVIDADE
TIPOGRAFÍA

3. ACCESIBILIDADE

5. A web naceu para
solucionar un problema
de accesibilidade

6. Crea unha vez.
Accede dende calquera sitio

8. O deseño debe solventar
problemas sen crear
outros novos

9. A accesibilidade é o
primeiro paso para unha
boa experiencia de
usuario

10. Non se pode conseguir unha experiencia de
usuario monolítica

11. 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

12. Todos somos
discapacitados dalgun
xeito:
Poucos coñecementos informáticos
Problemas cognitivos
Problemas físicos (visión, mobilidade, etc)

13. ...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

14. A clave esta en
proporcionar a
experiencia adecuada en
cada caso

15. Que cousas perxudican a
accesibilidade?

16. Páxinas grandes e pesadas

17. Linguaxe pouco entendible

18. Contraste de cores, tratamento tipográfico,
etc.

19. Requerimentos técnicos

20. A mellor estratexia é
poñerse sempre no peor
dos casos

22. O exemplo de Netflix
The stack (a pila):
https://vimeo.com/140261016
https://vimeo.com/140261015

23. Offline first

24. A accesibilidade tamén
nos beneficia de cara a
fora

25. Contido
enriquecido nas
redes sociais
(opengraph)

26. Contido enriquecido nos buscadores
(microformatos)

27. Gardar favoritos no móbil

28. Gardar favoritos
en windows

29. Cada canle de
accesibilidade ten o seu
público

32. INTERACTIVIDADE

33. As convencións axudan a
simplificar as interfaces

34. A aparición dos móbiles
para navegar pola web
tamén axudou

35. A boa interface reside
nos detalles
Charles Earmes:
“Non son solo detalles, son o deseño”

36. Son o que fan que un sitio que “soportas” se
convirta nun sitio “que adoras”

37. 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.

38. Exemplos:
Activar/desactivar preferencias
Deixar un comentario
Loguearse
Ver unha notificación
Compartir un elemento

39. Exemplo:
Crear nova carpeta
en instapaper

40. Dan Saffer
escribiu un libro
“Microinteractions”

42. O trigger é o que inicia a
interacción

43. Pode ser visible e interactivo
por exemplo, un botón

45. Trigger invisible
combinación de teclas, un xesto, etc

46. Autocompletado de youtube

47. Combinación de teclas

48. Trigger do sistema
Unha notificación

49. Trigger do sistema
Outro exemplo

50. Rules: definen o
comportamento da
interacción, as normas
que o rixen

51. Non empeces de
cero
Shopify: segundo a IP, enche
automaticamente a dirección

52. Exempo de
lóxica
Botón engadir ao carro da
compra

53. Feedback: informan
ao usuario do que esta
pasando

54. Feedback: O sitio ideal
para humanizar produtos
Comunicación de persoa a persoa

55. Feedback: Axuda a entender a interacción
http://photojojo.com/store/awesomeness/pocket-spotlight/

56. Feedback:
Un toque de
humor pode
ven ben
Actividade privada en
Discus

57. Exemplos: (paxinas 404)
http://www.lego.com/404notfound

58. Exemplos: (paxinas 404)
http://www.npr.org/templates/story/story.php?storyId=404

59. Loop: é o que nos
permite ver esta
interaccion ao longo do
tempo

60. Loop: axudan a conseguir
o que Brandon Schauer
chama “The long wow”

61. Repitese ou só pasa unha vez?

62. Loop:
Que pasa a segunda vez que se repite?

63. Remember me

64. E a vez número 100?

65. As microinteraccións teñen memoria

66. E tamén poden estar ao tanto da actualidade

67. TIPOGRAFÍA

68. 2006
Web design is 95%
typography
(Oliver Reichenstein)

69. 2012
Typography is the
foundation of web design
(Paul Scrivens)

70. Tipografía para pantalla

71. Como lemos?
O ollo, cando vai lendo vai facendo pequenos saltos, non fai un barrido contínuo.

74. Non se trata de buscar o
tipo adecuado senón de
usar a tipografía como
interface de usuario

77. Medium:
Tipografía do sistema como interface de usuario

78. A maioría das tipografías
foron deseñadas primeiro
en alta resolución e logo
adaptadas a pantalla

79. O hinting adapta a forma
da tipografía a distintos
tamaños para que se
vexa ben a distinta
resolución

80. https://www.typotheque.com/articles/hinting

81. 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)

82. 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)

83. Pero o hinting só
funciona nalguns casos,
xa que cada sistema
operativo é distinto:

84. 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

85. 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.

86. A filosofía de linux
Intentar facer as dúas cousas á vez, esta a
medio camiño entre mac e windows.

89. MOITAS GRAZAS