If you don’t care about user interface #accessibility because social #inclusiveness isn’t your cup of tea, consider that it might one day be your problem too.
If you don’t care about user interface #accessibility because social #inclusiveness isn’t your cup of tea, consider that it might one day be your problem too.
UX : Infinite Scrolling vs. Pagination — UX Planet
▻https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
comparaison (pour et contre) entre pagination et scrolling infini
#web_design #interface #pagination #infinite_scrolling #scrolling
There are only a few instances where infinite scrolling is effective. It’s best suited for sites and apps that boast user-generated content (Twitter, Facebook) or visual content (Pinterest, Instagram). Pagination, on the other hand, is a safe option, and good solution for sites and apps that intend to satisfy the goal-oriented activities of the users.
Les nouveaux outils de personnalisation d’interface de Medium
▻https://medium.com/une-histoire/how-to-make-your-publication-look-great-6a6d38175faa
Medium vient d’ajouter des outils pour personnaliser ses pages, donc faire un site plus perso. C’est intéressant de voir que ça permet des choses mais tout en restant limité. Header, grilles, etc. Ça a l’air simple et bien fichu, sans 40000 options trop compliquées.
Idées à piquer pour un squelette SPIP qui aurait des options de personnalisation mais-pas-trop ?
#idée_pour_SPIP #Medium #interface #personnalisation #ergonomie
Je suis en train d’essayer en simulant un site de revue de presse scandinave (un vieux rêve cc @archiloque). Pour l’instant je n’ai pas encore réussi à poster :) mais je n’ai pas encore pris le temps d’explorer et d’écrire :
@reka je t’attends :-) pour Medium attention au moment où ils voudront gagner de l’argent
Collect #ui - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.
▻http://collectui.com
Simplicité du clavier Mac - romy.tetue.net
▻http://romy.tetue.net/simplicite-du-clavier-mac
Il y a trois touches magiques à connaître, seulement trois (et aucun code bizarre), pour saisir plusieurs centaines de caractères — c’est plus qu’il n’en faut pour rédiger correctement en français —, à partir des 78 touches du clavier
#clavier #keymap #ergonomie #raccourcis #rédaction #clavierFrançais
Ma souris ergonomique verticale | Les tiroirs de ma tête
▻http://www.sophiemenart.info/2015/12/ma-souris-ergonomique-verticale
Comme de bien entendu, c’est à cause de la manipulation de la souris sur mon ordi que je me suis retrouvée avec le nerf ulnaire du bras droit complètement abîmé au point de devoir me faire opérer. Il est donc hors de question désormais que je continue à utiliser des mulots classiques bousilleurs de cubital et de carpien !
J’ai donc farfouillé sur le Net pour me trouver LA souris ergonomique qui va bien, verticale de surcroît. Ben oui comme ça coude, bras, poignet ne sont plus en torsion, mais reste bien alignés, et le poignet n’est plus en appui sur le plan de travail. Ce qui évite le blocage des nerfs et moult douleurs.
Intéressant. Du coup je me demande, le touchpad sur le portable c’est moins dommageable au corps que la souris ?
@nicolasm : d’après ce que j’ai lu, c’est aussi mauvais aussi. Mais d’après ce que j’expérimente à titre personnel, c’est nettement moins douloureux. Enfin, d’après mon kiné (qui ne recommande aucun périphérique particulier), ce qui est surtout mauvais, c’est la répétition d’un même geste et le manque de diversité posturale.
je vais peut-être me laisser tenter par le stylo
Je ne sais pas : la vidéo suivante montre qu’au bout de 6 mois d’utilisation intensive, le truc n’est pas à la hauteur des promesses et qu’il est perfectible. D’un autre côté, c’était la V1. Peut-être que la V2 est mieux.
Finalement, quelqu’un a essayé ? Korben en est content
►http://korben.info/souris-verticale-ergonomique.html
L’admin de #Wordpress réécrite de zéro sous la forme d’un client javascript
►http://ma.tt/2015/11/dance-to-calypso
▻https://en.blog.wordpress.com/2015/11/23/the-new-wordpress-dot-com
voilà #SPIP rép à ça… je pense qu’il va rapidement falloir offrir une #API compatible avec celle-ci !
Thousands more PHP developers will need to become fluent with JavaScript to recreate their admin interfaces in this fashion.
Héhé, j’en connais qui ne seraient pas rassuré⋅e⋅s par ça ^^
En plus des technologies derrières, plein d’idées en #ergonomie de l’admin aussi.
C’est surtout une horreur : pour se connecter à un admin wordpress il faut maintenant télécharger plus de 2 Mo de JS et autres trucs, résultat leur admin ne marche plus en 3G vu le temps fou que ça prend à charger. Et comme ça ne marche pas sans JS, impossible de juste recharger la page, ça ne juste marche pas. Bravo les sous-doués. Facile de designer des trucs qui pètent quand on a de la fibre au bureau. Venez vivre dans le reste du monde. Rien qu’ici en Australie les réseaux mobiles et ADSL sont une horreur, et ça le montre vite. Des sites comme CapitaineTrain, tout à base de JS bien lourd, sans fallback, ne marchent juste pas. Quand tu rapporte le problème on te dis gentiment d’aller te faire foutre. Belle idéologie de web accessible… :(
100% d’accord @bohwaz je suis complètement dans cette approche là : ça doit marcher sans Javascript (ce que j’essaye de faire pour toutes mes interfaces dans SPIP, que ce soit en admin ou en public).
Moi ce qui m’intéresse c’est surtout les améliorations d’ergonomie d’admin.
Mais après, avoir comme cœur une API qui sait vraiment tout faire, et que les interfaces (PHP, JS, client lourd sur le bureau, etc), ça me parait quand même une nécessitée aujourd’hui (et ça on l’a pas dans SPIP). Ce qu’il faut c’est que l’interface fournie par défaut ensuite soit vraiment accessible (ce qui n’est pas le cas ici apparemment).
Au sujet de l’accessiblité, en regardant vite faite leur exemple (une app Desktop et non une webapp), je pense qu’il migre vers un model App d’un côté (sur mobile ou bureau) et serveur API de l’autre.
Et quoi qu’il en soit, dans ce modèle le coût de la première connexion est élevé, mais après les données sont réduites au minimum.
Oui pour cette partie là je suis d’accord : que ce soit une application native ou même une webapp JS : dans les deux cas le but est de la télécharger UNE fois quand t’es dans un endroit avec de débit. Et ensuite c’est terminé, il n’y a plus que des interactions de contenus.
The new WordPress.com | scruffian
▻https://scruffian.wordpress.com/2015/11/23/the-new-wordpress-com
For the last year and some, I have been working on a secret project at Automattic. Today this project was released Open Source for the whole world to see.
This has been a fascinating experience; this project has changed a lot of things about the way we work at Automattic. Many of the changes have been technical; this was my first project using Node and React for example. However for me the biggest change is not the technology but the process.
À noter que pour ce projet ils parlent intégralement d’open source, jamais de logiciel libre. Et que ce projet a été développé en secret par une petite équipe, avec le code public dans un second temps.
Every website looks the same, and that’s ok | Webdesigner Depot
▻http://www.webdesignerdepot.com/2015/10/every-website-looks-the-same-and-thats-ok
Surely you’ve noticed by now that most websites for design agencies, designers, startups, or even products, and personal blogs all look a bit... similar. Even Tags: #webdesign
Persuasive #checkout best practice from #ASOS | Econsultancy
▻https://econsultancy.com/blog/8391-persuasive-checkout-best-practice-from-asos
Tags: ASOS #UX checkout #e-commerce #clevemarks
Shopping basket best practice from #ASOS | Econsultancy
▻https://econsultancy.com/blog/7106-shopping-basket-best-practice-from-asos
Tags : ASOS #e-commerce #UX #panier #clevermarks
– Stock availability made clear
– The primary call to action is clear
– Standard delivery costs are made absolutely clear
– Clear product details
– Total price you will be pay is clear
– Updating delivery options carried out within the basket
– Delivery upgrades are encouraged
– Free delivery threshold promoted to encourage increase in order value
– Free returns clearly promoted
– Secure shopping is made clear
– Promotion of signing in for returning customers
– Small, insignificant continue shopping button
– Small unobtrusive remove button
– Checkout button at the top of the basket
– Payment options are made clear
#ergonomie #conception #web #design #interface #bonnes_pratiques #commerce #tunnel_de_commande #panier
Who moved my #hamburger ? — #mobile Growth — Medium
▻https://medium.com/mobile-growth/who-moved-my-hamburger-d237860bc589?ref=uxhandy
Tags: hamburger #RWD #trend #UX #menu mobile #clevermarks
Refonte radicale de Paris.fr
▻http://romy.tetue.net/nouveau-site-paris-fr
Refonte agile, centrée utilisateur et design radical pour le nouveau site paris.fr, moderne et lisible, en moins de pages et plus de fun !
[…]
Telle refonte n’est possible qu’en travaillant en équipe, sur place, en impliquant la participation de tou·te·s, commanditaires compris, en méthode agile Scrum, seule façon — j’en suis convaincue pour le vivre sur un projet semblable — de secouer suffisamment l’institution pour aboutir à ce résultat, contemporain, fonctionnel et utilisable.
le plus impressionnant est la cure d’amaigrissement des contenus : le site passe de 8 à 3 niveaux d’arborescence pour 90 % moins de pages mais « plus claires, plus lisibles, plus simples, mais toujours aussi informatives », réécrites pour l’occasion. Incroyable ! Comment ont-ils réussi à mettre tous les contributeurs d’accord ? Des heures de prise de tête, 7 versions d’arbo, 848 post-its, des tas de mails…
En lien avec ce seen de @fil :
▻http://seenthis.net/messages/380151
#conception #interface #web #ergonomie #UX
Le point de vue d’un ergonome, plus critique (et il a raison) : ▻http://blocnotes.iergo.fr/articles/paris-fr-paris-perdu
Webdesign : 7 tendances futures
Bon, titre « tarte à la crème », mais y a des choses à piocher dedans.
▻http://fr.tuto.com/blog/2015/06/webdesign-7-tendances-futures.htm
Par contre, le fold est mort, ça s’enflamme un peu amha...
Aujourd’hui, chaque jeune adulte est un utilisateur expert du web.
(Et donc être expert du web c’est « utiliser des onglets ». Ya du chemin à faire.)
Sur le sujet des « utilisateurs experts » @Jean_no avait fait un chouette article dans Regards sur le numérique, la revue en ligne de Microsoft, qui disait en substance que la génération des hackers était passée (c’est une question de statistique : on mettait tous la main à la pâte quand on était peu nombreux, vu que ça ne marchait pas autrement).
L’attitude qu’ils ont vis-à-vis de leur environnement numérique me semble parfois passive. Les « digital natives » méritent peut-être d’être appelés « digital naives ». Ils pratiquent les réseaux sociaux plusieurs heures chaque jour et sont capables d’écrire un message en quelques secondes en n’utilisant que leur pouce mais peuvent pourtant souffrir de lacunes étonnantes. Il m’arrive à présent de devoir renseigner des étudiants vingtenaires sur la marche à suivre pour ouvrir ou enregistrer un fichier informatique.
▻http://www.rslnmag.fr/post/2011/10/28/Une-generation-post-micro.aspx
Design et refonte de site média : les bonnes pratiques
Une présentation par l’agence Datagif sur le design des sites médias. Au travers de cas concrets, c’est toujours intéressant.
▻http://www.blogdumoderateur.com/design-site-media-bonnes-pratiques
#webdesign #graphisme #interface #ergonomie #usability #média
Un article du New York Times en décembre 2012 :
Snowfall, décembre 2012 :
L’article dans la maquette actuelle (mai 2015) :
▻http://www.nytimes.com/2012/12/27/world/americas/bolivia-reduces-coca-plantings-by-licensing-plots.html
Infinite scrolling - Blog - AnySurfer
▻http://www.anysurfer.be/nl/blog/detail/infinite-scrolling
Infinite scrolling of oneindig scrollen is een techniek waarbij nieuwe inhoud automatisch inlaadt wanneer de gebruiker het einde van de pagina bereikt. Denk bijvoorbeeld aan de tijdslijn van uw Facebook profiel.
Dans la section forum de ►https://linuxfr.org , cette perle : ▻https://linuxfr.org/forums/programmationweb/posts/resolu-design-d-applications-web-pourquoi-ca-marche-ou-ca-ne-marche-pas
LeBouquetin demande comment améliorer l’aspect et l’utilisabilité de ▻http://tracim.fr . D’un cas particulier, les réponses de Sygne et de GaMa en particulier sont instructives pour le cas général.
Si vous participez de près ou de loin à des projets logiciels impliquant des utilisateurs humains, je vous recommande cette lecture.
Flicage-brouillon - Partie 3 chapitre 26 - Faire mieux que les systèmes centralisés - Standblog
▻http://standblog.org/blog/post/2015/03/09/Flicage-brouillon-Partie-3-chapitre-26-Faire-mieux-que-les-systemes-centr
Si l’on construit des outils nous permettant d’avoir le contrôle sur nos données, des SIRCUS, il ne suffit pas qu’ils respectent les 4 principes […]. Il faut qu’ils aient du succès, qu’ils soient adoptés massivement et remplacent petit à petit les solutions actuelles, faute de quoi ils ne pourront pas renverser les tendances actuelles à la centralisation et au profilage, qui mènent à la surveillance de masse.
[…]
Il convient juste de se souvenir que le logiciel doit être conçu pour l’utilisateur et pas pour son concepteur. Son utilisation doit être évidente et plaisante, ce qui rend les choses plus compliquées pour les développeurs : ce qui est simple à utiliser est bien souvent complexe à construire.
Le défi est particulièrement complexe dans la mesure où le respect de la vie privée donc d’une architecture distribuée et reposant sur la cryptographie ajoute des contraintes supplémentaires dont il faut tenir compte au niveau expérience utilisateur.
Ça parle un peu d’IP, d’Internet et des sondes #RIPE_Atlas, mais surtout d’#ergonomie et de #visualisation_de_données. Résumé : représenter des phénomènes complexes et évolutifs (ici, des pannes de l’Internet) est dur, à la fois à cause des limites de #JavaScript, et à cause de celles du cerveau humain.
▻https://labs.ripe.net/Members/emileaben/visualising-network-outages-with-ripe-atlas
Je ne connaissais pas, par exemple, l’effet psychologique du « #change_blindness ».
Sur ce « change blindness », ▻http://forums.futura-sciences.com/science-ludique-science-samusant/83775-savez-compter-passes.html (bien lire le texte introductif - mais pas les réponses - avant de regarder la vidéo)
▻https://medium.com/medium-eng/the-curious-case-of-disappearing-polish-s-fa398313d4df
Une fascinante histoire de #typographie, d’#internationalisation du logiciel, d’histoire tout court, de #machine_à_écrire, de #Windows et d’#ergonomie...
Stars and Stripes and ISO Codes · An A List Apart Column
▻http://alistapart.com/column/stars-and-stripes-and-iso-codes
This is the real story of a promising French start-up expanding into the U.S. market. The founders now have West Coast offices and the app has been fully translated into English. One minor detail though: to switch to the website’s English version, American customers have to click on… the Union Jack.
Comme on le dit souvent chez #spip, c’est très mal d’utiliser un drapeau pour illustrer une langue...
Training the #cms · An A List Apart Article
▻http://alistapart.com/article/training-the-cms
Launching a site powered by lovingly crafted content models is a joy. But what happens in the weeks that follow, as authors start entering new content into the CMS? If you want to keep your well-structured content intact and on strategy, a training PDF won’t cut it. Let Eileen Webb show you what will: getting editorial guidelines where your authors need them most-in the CMS itself. Tags: #webdesign cms
Une des questions importantes notamment :
How hard is it to update the help text? As needs change over time, will adjusting the instructions be a hassle?
Can you change custom field labels used in the admin interface without affecting the machine name used in queries and front-end display?
C’est-à-dire pour un CMS donné : peut-on facilement changer le label humain des champs et ajouter ou changer l’explication de chacun des champs ?
Ceci afin d’adapter rapidement l’interface de rédaction au contexte précis du site sur lequel on est.
J’utilise à présent ceci ▻http://contrib.spip.net/Manuel-de-redaction-du-site car j’ai compris que le manuel livré en PDF avec la livraison du site ne sert à rien pour la suite de la vie du site mais c’est décontextualisé. C’est à l’endroit où il y a une manipulation à faire qu’il faut l’info.
Pour la documentation utilisateur j’utilise dans SPIP une possibilité qui est déjà là : les annonces générales.
On peut en faire plusieurs, par exemple pour expliquer comment insérer des documents, traiter les images, pour des formulaires spécifiques, pour les mises à jour successives… Ces annonces ont l’avantage d’être envoyées par mail, puis sont accessibles en page d’accueil de l’espace privé et modifiables par les différents acteurs du site au fur et à mesure.
#SPIP #CMS_utilisateur
Je ne sais pas si c’est pertinent ou pas (c’est un questionnement), mais il faut peut-être distinguer :
1) l’aide globale au site (rarement utile)
2) les aides globales à une page ou à une zone
3) le fait de pouvoir personnaliser les labels et explications de chaque champ de chaque formulaire du site
Ce ne sont pas forcément les mêmes besoins, ni la même technique par derrière.
À mon avis (et suivant l’article Alistapart), le mieux est d’arriver à permettre le 3.
Le 1 est un pis-aller, qui peut se faire actuellement avec le plugin Manuel ou les annonces générales.
Un entre-deux, plus facilement techniquement faisable à court terme, serait de permettre le 2. Par exemple en utilisant le Compagnon comme API, dans un plugin dédié qui proposerait de rédiger des aides en de multiples endroits (vue et édition d’un type d’objet, voire personnalisation dans une branche ou un objet précis).
Pour le 3 je me rend compte que la fonctionnalité est disponible avec les champs extra et je l’utilise souvent (d’autant plus que ces champs correspondent souvent à des besoins spécifiques au site).
Il y a une API du Compagnon ou c’est une hypothèse ?
Oui et non pour Champs Extras : disons que c’est logique puisqu’on les ajoute nous-mêmes, donc forcément on peut choisir leur label et explication. :)
Le point 3 concerne surtout le fait de pouvoir modifier ceux par défaut (de SPIP et de plugins).
Pour le compagnon, oui oui, il y a une API, pipelines, etc, pour pouvoir en ajouter.
FLUPA UX-Day 2014
▻http://romy.tetue.net/flupa-ux-day-2014
Design émotionnel, gamification, companion app, parcours IRL, mais aussi livrables allégés et collaboration agile.
Rendez-vous incontournable des professionnels de l’expérience utilisateur, cette 3e édition du FLUPA UX-Day était plus orientée métier et méthodo, moins ergo, plus design UX.
#FlupaUxDay #ergonomie #UX #webdesign #WDFR #gamification #DesignEmotionel
« Il y a un chantier énorme pour la communauté des développeurs et des experts en sécurité : l’interface utilisateur. »
▻http://blog.barbayellow.com/2014/08/16/securite-pourquoi-ca-ne-marche-pas
#sécurité_informatique #journalisme #cryptographie #ergonomie
Sur le même thème et dans la même discussion : ▻http://pixellibre.net/2014/08/chers-nous ou ▻http://www.hackersrepublic.org/culture-du-hacking/une-histoire-de-privileges
Et ma réponse (pas dans la ligne des trois articles cités) : ▻http://www.bortzmeyer.org/securite-facilite.html
X to Close — Solve for X — Medium
▻https://medium.com/solve-for-x/x-to-close-417936dfc0dc
X’s are everywhere in user interface (UI) design. A powerful symbol, [x] is capable of closing windows and popups, toolbars and tabs and anything else that might otherwise be cluttering up your screen.
Clicking on [x] to close a feature has become an instinctual part of using a computer and a standard in web and software design. Although it may seem like the ubiquitous [x] has always been a part of Graphical User Interfaces (GUI), a quick jaunt through the history of GUIs reveals that this actually isn’t the case.
So where and when did the [x] first enter into the UI lexicon?