Notes de conférence Paris Web – Vendredi

Un peu tard, mais voici le résumé des conférences durant lesquelles j’ai pris des notes vendredi à ParisWeb

Les icônes Qui sont-elles ? Quels sont leurs pictos ?

Le PDF de support est disponible ici.

• Favicon :  depuis IE5 (1994)
• Pictogramme + style + contexte = une icône

Le style :

• Au japon : une tendance à simplifier les blasons européens du 15em siècle
• Exemple des icônes de signalisation routière
• Pictogrammes : arrivée des pictos aux JOs pour uniformiser et normaliser le langage
• Principe de lisibilité et contexte

Les icônes, c’est bien :

• Elles accélèrent la compréhension (représentations cérébrales stockées qui font appel au concept sans utiliser la mémoire)
• Reconnaitre une image est plus facile qu’un texte
• Elles facilitent la navigation : l’œil accroche plus ou moins inconsciemment les éléments de la page => mémorisation plus simple par symboles
• Styler les icônes du site permet de donner une cohérence de style et améliore la communication

Ne PAS mettre des icônes PARTOUT !!

Les icônes seules peuvent être confuses :

• Le contexte sert énormément
• Les étiquettes peuvent aider aussi
• Placement de l’étiquette à gauche quand on lit de gauche à droite, vis versa
• sites extrêmement internationaux : être plus fin sur la multi culturalité des pictos, et placer l’étiquette au dessus

Différence icônes / illustration

• Rythmer oui, Illustrer non
• Différencier les icônes, des illustrations !!!
• Ce n’est pas le visuel qui fait l’icône mais l’usage

Problème d’incohérence d’icônes :  la cohérence étiquette / icônes est indispensable !

L’art de choisir une icône :

• Signification
• Choix
• Test
• Go / no go

• Penser au style global, et choisir en fonction.
• Penser plus grand, c’est pas parce qu’une icône est mignonne toute seule qu’elle sera efficace
• travailler en taille réelle !!
• Petites icônes:  réfléchissez, pensez aux petites tailles (le SVG ?)
• Problème des font-icônes parfois qui pixelisent les icônes toutes petites

Universalité

• Contexte socio culturel !
• Attention aux expressions du visage
• Besoin d’un bagage culturel suffisant pour comprendre les icônes : icône du cœur plus parlante que le mot “cardiologie”
• Accessibilité psychique
• Faciliter l’expression : certains systèmes d’avis en ligne proposent des icônes pour faciliter le fait de donner son avis

Ne jamais mettre un icône fun : les ALTERNATIVES !! (accessibilité)

Coup de gueule :

• La maison « home » en anglais, mais « page d’accueil » en français (donc le symbole a moins de sens)

• Loupe pour rechercher, loupe pour le zoom ?
• Symbole “montrer la navigation” ok pour webdesigners … mais pour le grand public ?!
• Ce qui compte, ce sont les utilisateurs !!
• Besoin de standards !!
• ISO : 65% des personnes doivent comprendre le picto, moins de 10% doivent comprendre l’inverse
• Besoin d’une normalisation w3C ?

Fast mobile UIs

Le pdf est disponible ici , une conférence pleine de bons conseils et petites techniques pour améliorer les applications HTML5

The growth of gamification: helps getting user more evolved with the product.

More and interface that facilitate gamification are used today.

Don’t decide you need an HTML5 app just because it’s cool : think of making an app, THEN choose the right tool

HTML5 apps : you’ll get problems

• Viewport problems
• Ugly bars from browser on the top if your app: use scrollTo(0,0)
• Speed is another problem : loading speed, responsiveness
• HTML5 apps on iOS device feel better than on other devices
• Http hates you !! => lots of loading problem so if you can, keep the number of requests down
• You can use the pipelining technique : techno from 2005, supported in Android : delaying requests once the connection is open
• Sometimes users understands loading time, but not always
• applicationCache is a lie (a douchbag?) not a silver bullet :(
• Golf everything : 140byt.es makes files smaller and smaller !!
  • keep functions slim
  • only do what you have to do in CSS and Js
  • avoid bloading up your dump !

You don’t need a fancy JavaScript api like jQuery

• Use HTML5 initial APIs
• .querySelectorAll() : faster
• getElementsByClassName : very fast !!
• getElementById : fast too
• Handle events :  event bubble : instead of using 10 listeners !
• XMLHttpRequest : instead of ajax requests ! fast and not complicated
• CORS : use with pipelining!
• pushState : use the history , can help save some requests
• requestAnimationFrame : android + chrome : make the browser wait before doing something
• Redraws hate you ! Don’t do too many, the application will freeze

CSS is your friend!

• Easy to load things in CSS
• Cheat and add dummy transforms just to get things hardware accelerated (turn them off for Android 2.x it’s better for performances)
• matrix3d transform : easy to create all the transforms just with one line

Android !!

• Animation not always good when combining them
• Might have to make fewer animations for older versions
• Hardware accelerated transforms can act slower thant non HW acc
• data-more attributes: are good, but sometimes CSS gets lazy so you might have to force redraw :/

Small hacks :

• For numbers in text, the format gets detected by the phone and styles as a phone number : you might have to tell the browser not to interpret it as a phone number
• Package app in Phonegap : does not care about the format, have to slice the numbers

Onclick events:

• It can be fired many times on tap events
• Browser delays the onclick event on mobiles
• touchstart; touchend, touchmove are new events you can use (see hammer.js)
• The problem with touchend: it does not tell you where it was triggered

Perceived responsiveness :

• Can make the event “seem” fast, feel fast even if it not done
• If the interface feels good, user are happier to wait

Some little tweaks you can use:

• pointer-events : none;
• user-select:none;
• user-drag:none;
• Example: snowflaks in the app you don’t want to be clicked
• Viewport
  • name=viewport content=”initial-scale=0.5” ===> looks sharper because it looks smaller, and make everything twice as big. Faster than letting the browser do the rescaling for you.
  • Don’t forget device pixel ratio   people with different type of pixel ratio are using the app
• navigator.connection
  • care for different connectivity types: 3G, Edge, etc
  • in case of roaming for example

About native comptabilities

• Use Phonegap if you need to access some native functionalities
• Don’t try to be native, ‘cause you are not : don’t try to compete ‘cause you can’t!

About conventions

• Beware the back button on site, ok pour iPhone, but stupid for Android
• Speed of understanding : how soon can I start to use the app. I don’t want to think on how I have to use it !
• Facebook usecase : people prefered using their website than native app
• Firefox OS : an os based on web standard

Pat Muller : paved the way, opera, adobe helped debuging too (shadow and edge inspect)
more and more softwares are helping to create tools to help debuging
Android : Chrome is getting more and more the default browser !
http://singlepageappbook.com/