The Best App Launchers for Ubuntu & Linux Mint
▻https://www.omgubuntu.co.uk/2019/08/best-app-launcher-for-ubuntu-linux
Ubuntu’s default app launcher is the GNOME Shell Applications Overview — but this full-screen grid of icons doesn’t suit everyone’s tastes. We share our favourite Linux app launchers, all of which work on Ubuntu & […] This post, The Best App Launchers for Ubuntu & Linux Mint, was written by Joey Sneddon and first appeared on OMG! Ubuntu!.
#Montpellier : des #pot-de-vin jusqu’à 1 700 € pour obtenir un #logement social - 16/03/2019 - midilibre.fr
▻https://www.midilibre.fr/2019/03/16/montpellier-des-pot-de-vin-jusqua-1-700-pour-obtenir-un-logement-social,80
L’enquête aura débuté fin 2018, lorsqu’un homme de 47 ans a signalé qu’il avait versé, en vain, un total de 1 700 € à un salarié du bailleur social montpelliérain. Celui-ci, chargé de l’entretien de logements et âgé de 54 ans, était censé accélérer la demande d’attribution de logement du requérant. Trois autres personnes, identifiées lors des investigations, ont également versé des pots-de-vin pour des montants s’élevant de 500 à 850 €. Elles aussi comptaient être favorisées dans l’obtention d’une habitation. Entendu, le suspect a assuré qu’il avait été sollicité et expliqué qu’il se serait chargé d’accompagner ces personnes dans leurs démarches.
Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
▻https://www.fondationcustodia.fr
Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…
Parmi les points à voir en particulier…
– Un menu hamburger tout mignon.
– Des #longforms pour la présentation des expositions :
▻https://www.fondationcustodia.fr/Georges-Michel
– Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :
– Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
▻https://www.fondationcustodia.fr/Les-portraits-en-miniature-12
Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
►http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images
On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :
– Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :
Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.
– Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
▻https://www.fondationcustodia.fr/les-portraits-en-miniature
– Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.
– Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :
– Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).
– Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.
À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))
Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.
Ce qui donne par exemple, avant chargement de l’image :
et une fois l’image chargée :
Ce que je réalise directement dans le squelette ainsi :
#image_haut {
background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
background: linear-gradient(to bottom,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
);
}
#image_haut:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
z-index: 1;
background: linear-gradient(to right,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
);
mix-blend-mode: soft-light;
}
Merci pour cette astuce du fond d’image en dégradé CSS.
J’ai essayé de naviguer au clavier et impossible de dérouler le hamburger :(
@realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.
Je fais ceci :
$("#menu_flottant a").on("focus", function() {
$("#afficher_menu").prop("checked", true);
});
$("body > *:not(#menu_flottant) a").on("focus", function() {
$("#afficher_menu").prop("checked", false);
});
La bonne adresse pour un vrai repas syrien : Chez vous, à la maison ou tout autre lieu à votre concenance ! Invitez vos proches et découvrez à la maison, un repas divin, un festival de couleurs et de saveurs syriennes
A Lille, Roubaix, Tourcoing, Marcq-en-Bareuil, Croix, Wasquehal, Mouvaux, Bondues, Linselles, La Madeleine, ... dans la Métropole Européenne :
Je vous raconte. Invité chez des amis dans la métropole de Lille, j’y ai découvert leur savoureux voyage parmi les spécialités de Syrie.
Le nectar de la gastronomie syrienne, préparé maison sous nos yeux par Wafaa, traiteure à domicile.
Plutôt que de se faire livrer un menu gastronomique syrien, mes amis ont demandé à Wafaa de venir cuisiner ses mets magnifiques chez eux.
Ce fut un dîner très copieux aux mille saveurs orientales. Un repas syro-libanais composé de recettes de Damas et d’Alep à base d’ingrédients naturels et frais.
Nous avons apprécié :
– Les entrées froides et chaudes ( mezze, Hommos, beaucoup de verdure, et le caviar d’aubergines grillées, Mouhamara, ...)
– Les plats exotiques , brochettes d’agneau, de poulet, des variétés de grillades
– Et les desserts ! Les crêpes syriennes garnies de crème et pistaches, à déguster avec un sirop à la fleur d’oranger. Un délice (pour gourmets et gourmands !)
Nous avons vécu une fête ensoleillée très réussie !
Traiteur syrien à domicile dans la métropole Européenne de Lille, Wafaa nous régale de sa cuisine syrienne.
Pour commander les menus syriens de Wafaa , rendez-vous sur le site : ▻https://anotherchef.com/menu?nationality=syrienne&locality=Lille
Vous pourrez y découvrir les menus qu’elle propose et choisir la date à laquelle elle viendra les cuisiner chez vous. Offrez à vos invités une expérience qui sort de l’ordinaire, faites-leur découvrir une cuisine délicieuse et authentique et profitez d’une rencontre humaine enrichissante avec votre chef Wafaa.
▻https://blog.anotherchef.com/2017/05/18/portrait-wafaa-chef-a-domicile-syrienne-et-traiteur-a-lille
#Wafaa, #spécialités_de_Syrie, #Syrie, #menus-syriens, #cuisinier_à_domicile, #Traiteur_à_domicile, #repas_syrien, #gastronomie_syrienne, #repas_syro-libanais, #recettes_de_Damas,
#Lille, #Roubaix, #Tourcoing, #Marcq-en-Bareuil, #Croix, #Wasquehal, #Mouvaux, #Bondues, #Linselles, #La_Madeleine, #MEL,
Critical Understanding Through Practice: “Autoprogettazione” by Enzo Mari (1974) – SOCKS
▻http://socks-studio.com/2016/04/18/critical-understanding-through-practice-autoprogettazione-by-enzo-mari
In 1974, Italian designer Enzo Mari published the first edition of “Autoprogettazione?” (the title might be roughly translated with “Self-design?”), a manual which included a number of furniture projects that could be realized by anyone through wooden boards and simple tools, basically a hammer and some nails.
The book provides exercises which should be carried out individually in order to understand how good design works, “good design” meaning, according to Mari, a design which responds honestly to human needs. In the words of Mari, these projects do not want to be alternatives to industrial production, but exercises which may help each one understand how industrial products work and help to develop a critical eye towards them.
The technique to be employed in order to build the furniture is elementary, but the reader/user may carry out the projects in different ways, changing some details and shapes while understanding the basic structural component of an object. “Autoprogettazione” is an activity of research made through practice.
http://socks-studio.com/img/blog/mari-autoprogettazione-1b.jpg 
http://socks-studio.com/img/blog/mari-autoprogettazione-1a.jpg 
http://socks-studio.com/img/blog/mari-autoprogettazione-7a.jpg 
http://socks-studio.com/img/blog/mari-autoprogettazione-7b.jpg 
http://socks-studio.com/img/blog/mari-autoprogettazione-10a.jpg 
http://socks-studio.com/img/blog/mari-autoprogettazione-10b.jpg 
http://socks-studio.com/img/blog/mari-autoprogettazione-14.jpg 
Partita I BWV825, Huguette Dreyfus
▻https://www.youtube.com/watch?v=_luPlm6FW7A
#Bach est un génie et un extra terrestre.
Une #gavotte lunaire jouée par un martien :
▻https://www.youtube.com/watch?v=8hxEGIOzyu8
GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
▻https://github.com/VPenkov/okayNav
This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.
COOL.
Mais ça ne gère pas les sous-menus par contre. Ça sera pas mal d’arriver à coupler ça à un autre plugin (ou CSS) qui gérerait les sous-menus de manière accessibles (avec nav par clavier aussi) et responsive.
#intégration #web #HTML #CSS #javascript cc @fil
Ah bah ya même un ticket d’amélioration pour ça déjà :
▻https://github.com/VPenkov/okayNav/issues/4
FlexNav - A jQuery Plugin for Responsive Menus
▻http://jasonweaver.name/lab/flexiblenavigation
Un menu responsive est pas trop mal accessible (en tout cas bien au clavier), qui s’adapte à l’écran, et qui marche aussi en tactile. Il est aussi sobre, sans styles envahissants, donc facile à personnaliser.
via @fil
#intégration #web #HTML #CSS #javascript #jquery #menu #navigation #responsive
par contre dans les options on peut pas désactiver complètement le hover, qui est une mauvaise pratique : rien ne doit s’ouvrir sans clics explicites, car bouger la souris c’est pas un choix
bon après il sait utiliser hoverIntent, un autre plugin jquery, qui est moins pire, parce que ça attend avant de lancer l’action, histoire d’être sûr que la personne a vraiment mis la souris à tel endroit sans bouger exprès
mais ça serait quand même mieux de pouvoir désactiver complètement, et qu’à la souris ça soit exactement comme en tactile : cliquer sur la flèche explicitement
Ah tiens en voilà un super
▻http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu
Non,il est uniquement en CSS apparemment, et donc entre autre, il ne fonctionne pas au clavier. Que ce soit avec tabulation, ou avec Entrée+flèches, ya aucun moyen d’atteindre les sous-menus en clavier.
Ah peut-être qu’il y en a au moins un correct là @fil :
▻http://seenthis.net/messages/395433
#slicknav - #responsive Mobile #menu Plugin for #jquery
▻http://slicknav.com
un menu «hamburger» responsive en jquery simple et configurable
Idée n°127 : permacultiver | 1000 idées pour la Corse
▻https://1000ideespourlacorse.wordpress.com/2015/07/20/idee-n127-permacultiver
pour répondre à la question qu’on pose le plus souvent en #Permaculture, à savoir : « c’est quoi la différence entre la Permaculture et, au choix, l’#agroécologie, le #jardin bio, l’#agriculture bio ou n’importe quoi touchant à du vivant… », et bien, la différence fondamentale, c’est l’insistance sur le #Design. La Permaculture, c’est précisément un processus complexe de conception d’#écosystèmes, nécessitant de faire appel à des compétences issues de plusieurs métiers et disciplines, qui doit s’insérer dans un contexte, et est susceptible de s’insérer dans un travail d’équipe plus large.
Je prends deux exemples parce que je vous sens sceptiques.
La conception d’un simple jardin en Permaculture est un processus complexe dans lequel le jardinier va suivre une méthode complète le menant de l’idée à la réalisation (et même plus loin), en passant par l’observation, l’évaluation, et bien entendu le Design proprement dit, qui le conduira à l’élaboration d’un projet précis matérialisant son dessein, accompagné de dessins, soit, étymologiquement, les deux mots qui, ensemble, sont désignés par Design en anglais (voir la deuxième page de ce PDF▻http://www.eyrolles.com/Chapitres/9782708126350/chap1.pdf, par exemple). Cette conception nécessite de faire appel à des compétences issues de la #botanique, de l’#arboriculture, du #maraîchage, de la #pédologie, de la #climatologie, du paysagisme, de la #maçonnerie, de la #menuiserie, de l’#écologie, de l’#hydrologie, de la systémique, de la gestion des #risques, du dessin, de la rédaction… Elle devra tenir compte de contraintes locales, sociales, juridiques (avec parfois des compromis difficiles à trouver par exemple entre le besoin de laisser des zones en friches pour favoriser la #biodiversité, et, en région méditerranéenne, le besoin de prévention contre l’incendie), et trouver des solutions à ces contraintes. Tout ceci devra être pris en compte au moment de passer à la phase appelée « Design » dans les méthodes de Permaculture, bien que le terme Design puisse aussi bien être appliqué, selon la définition donnée par notre étudiante et d’autres définitions du Design, à l’ensemble de la méthode.
Mais la Permaculture ne s’arrête pas aux jardins, et j’en viens à mon second exemple : celui de l’amélioration d’une ville en utilisant les méthodes de la Permaculture. Cet exemple est tout sauf théorique puisque la Permaculture a donné naissance, dans les années 2000, au mouvement des Villes en #Transition ▻https://fr.wikipedia.org/wiki/Ville_en_transition (Transition Towns). Le problème était le suivant : face à la double perspective du #réchauffement climatique et de la raréfaction des #ressources naturelles, comment rendre une ville capable d’être résiliente à ce double risque ? Plus encore que dans le cas d’un jardin, on s’en doute, le problème est complexe, et devra mobiliser un nombre bien plus important de métiers et de disciplines. Clairement, il faudra, de plus, travailler et composer avec tout un tas de personnes extérieures : des urbanistes, des architectes, des élus, des énergéticiens, etc.. Le tout nécessitera une méthodologie solide… Bref, il va falloir élaborer le Design à la fois de la ville telle qu’on la veut, mais aussi de tout un tas de sous-éléments. On retrouvera des questions de Design de service quand il s’agira de mettre en place une #monnaie locale et de la faire accepter, ou dans la mise en oeuvre d’une stratégie zéro #déchets, et des questions de Design d’objets un peu partout… Bref, du Design, encore du Design…
Que ce Design en Permaculture ne soit pas toujours élaboré par des professionnels et/ou de manière professionnelle, c’est un fait. On trouve dans les personnes qui se réclament de la Permaculture tout et n’importe quoi, et même parmi les gens sérieux, on trouve bien plus d’amateurs que de professionnels, et leurs Designs sont parfois un peu sommaires. Ca n’empêche pas que le processus de conception en Permaculture (le vrai) mérite bien le nom de Design, puisqu’il répond à tous les critères des bonnes définitions du Design.
Parfois quand je lis ce genre de choses, ça me semble un peu un mot-magique. Tu remplaces par « planification » et ça revient à peu près au même. Et c’est d’autant plus parlant quand on parle des villes et d’urbanisme. Ya le modèle du marché, où c’est l’offre et la demande qui gère la ville, les achats de terrain, les trucs pas du tout coordonnés entre eux etc. Mais le modèle « on planifie tout à l’avance » sur des villes entières, voire sur des régions ou pays entier, ben ça s’est déjà vu (et à ce niveau là c’est très étatique d’ailleurs), et ça mobilisait pareil, de nombreux métiers, etc. Mais c’est juste le but qui changeait (du genre être bien organisé pour les travailleurs, ou ici être le plus écologique, etc).
C’est une des traductions proposées, mais je trouve que planification insiste plus sur la mise en œuvre, et laisse le côté « conception » un peu en retrait.
Je sais pas si planification est vraiment équivalent. Ici il y a la question de partir de l’existant et de laisser un éventail de possibles à l’évolution du système et à ses ramifications, là où (me semble-t-il) la planification part de zéro et définit les choses de façon assez fixe.
Comment Construire en Bois de Pierre RICAUD.
▻http://www.editionsvial.com/fiche-produit.php?id_domaine=12&id_livre=47
Nb pages : 192
Nb photos N&B : 50
Nb schemas : 440
Prix : 35 euros.
On y trouve la description d’une cinquantaine de projets : ouvrages en plan ou en volume, avec ou sans articulation, depuis une simple étagère jusqu’au lit à deux niveaux en passant par des volets sur barre, une échelle ou une table articulée.
Ces quelques plans et instructions seraient peu utiles sans l’explication détaillée d’une méthode de travail sérieuse : le débutant ne sera plus perdu parmi les plans cotés ou les épures, la nomenclature des pièces nécessaires à la réalisation ou feuille de débit, le choix et la réalisation des assemblages (à la main ou à la machine), le traçage, l’usinage et la construction. Au fil des pages, le lecteur sera capable d’une mise en œuvre méthodique dans les règles de l’art, porte ouverte vers un ouvrage solide aux assemblages précis.
Ainsi, les procédés de fabrication souvent traditionnels comme les tenons et les mortaises sont détaillés avec clarté. L’accent est porté à la fois sur l’utilisation de l’outillage manuel (avec un chapitre sur les différents outils traditionnels et la manière de les employer ou tout simplement de les tenir) et celle des machines, en poste fixe ou électroportatives. Quelques conseils guideront utilement l’amateur dans le choix des machines à acquérir.
L’affûtage ne peut être laissé de côté, et l’auteur insiste sur les techniques permettant l’entretien d’un fer de rabot, d’une scie ou d’un racloir. Le livre se termine par ce qu’il faut savoir des matériaux : bois (plots et avivés) et matériaux dérivés.
Un extrait en pdf, avec notamment comme exemple la fabrication d’une table : ▻http://www.editionsvial.com/imagesBDD/017_Construire_BOIS_Extrait_BD.pdf
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
NavNav - 90+ Responsive #navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript)
▻http://navnav.co
A ton of #css, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web. Tags: #rwd navigation #design css #inspiration #clevermarks
#jquery #bootstrap-style Dropdowns
▻http://labs.abeautifulsite.net/jquery-dropdown
un plugin jquery pour remplacer le dépliage des menus par le script #dropdown de bootstrap
Pocket holes vs. mortise and tenon joints
▻https://www.youtube.com/watch?v=apsH8eBfjVA
Using my screw jack and a bathroom scale to measure the breaking force of pocket holes vs mortise and tenon joints
#menuiserie #bois #diy
Des survivants « échoués » de Lampedusa créent une Startup sociale
« Il y avait 350 personnes sur mon bateau. Je pense encore beaucoup à ceux qui ont disparu dans l’eau pendant le trajet. » Mêlant leur histoire personnelle à leur projet d’intégration professionnelle, cinq sans-papiers africains lancent une entreprise de fabrication de #meubles en bois, en partie fabriqués avec des #épaves échouées sur l‘île de Lampedusa. Un projet plein de solidarité et d’espoir, une belle leçon de vie !
https://mrmondialisation.org/wp-content/uploads/2015/01/aa35f116de3bfd5b72b343bc188ea84f_cropped.jpg 
https://mrmondialisation.org/wp-content/uploads/2015/01/Lampedusa-Stuehle-Start.jpg 
https://mrmondialisation.org/wp-content/uploads/2015/01/refugees-974x1300.jpg cc @reka
#Cucula, da migranti a designer di successo
Nella loro officina berlinese la fuga attraverso il Mediterraneo e la memoria di Lampedusa acquistano un valore differente: la sedia di Cucula, in edizione limitata perché costruita con il legno dei relitti delle barche di Lampedusa, diventa simbolo della campagna di raccolta fondi sul sito di crowdfunding Startnext (50 sedie a 500 euro l’una). (segue)
▻http://www.repubblica.it/rubriche/startup-stories/2015/03/10/foto/cucula_da_migranti_a_designer_di_successo-109205552/1/?ref=HRERO-1#4
http://www.cucula.org/wp-content/uploads/2014/08/CUCULA_Tavolo-Rettangolare-X.jpg 
http://www.cucula.org/wp-content/uploads/2014/08/CUCULA_Libreira.jpg 
http://www.cucula.org/wp-content/uploads/2014/08/CUCULA_Sedia-Due.jpg Le site de l’entreprise Cucula ("refugee company for crafts and design):
▻http://www.cucula.org/en
Pure CSS Off-screen Navigation Menu
▻http://www.sitepoint.com/pure-css-off-screen-navigation-menu
gemma correll and her merry band of misfits: useful information
▻http://gemma-correll.blogspot.fr/2014/04/useful-information.html
Accessible Mega #menu
▻http://adobe-accessibility.github.io/Accessible-Mega-Menu
“The #navigation menu at the top of this page demonstrates how one can implement an accessible #mega_menu as a jQuery plugin. It is modeled after the mega menu on adobe.com but has been simplified for use by others.” Tags: accessibilité menu navigation mega menu
Spacing elements with #margin and #padding
▻http://simurai.com/blog/2014/05/25/spacing-elements
"So let’s say we have a “bar” with some items inside. Like a header or footer. Let’s also say we want those items to be spaced evenly, meaning they have the same gab everywhere. Shouldn’t be a big problem." Tags: margin padding #espacement #éléments #menu #CSS
Luis Abreu: Why and How to avoid #Hamburger_Menus
▻http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus
We now have the data that suggests Sidebar #Menus — sometimes called Hamburger Menus/Basements, are a bad design pattern and consequently reduce user engagement.
Side Drawer Navigation Could Cost Half Your User Engagement
▻http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement
So, you have a mobile app where there are more pages or sections than can fit on a mobile screen at once. Your first thought might be to create a tabbed design, with a row of tabs along the top or buttons along the bottom.
@fil
On the other hand, if your app has multiple views that users will engage with somewhat equally, then side navigation could be costing you a great deal of your potential user engagement, and interaction with those part of the app accessed via the side menu.
#menu #ergonomie #conception #navigation #interface #A/B_test
Recréer le look « faux vieux bois » à pas cher (avec du papier kraft)
▻http://www.remodelaholic.com/2014/04/faux-wood-plank-floors-brown-paper
Have you ever had an idea that was just so crazy that you knew that it would either be brilliant or a big fat flop? Our guest today is here to share a big crazy BRILLIANT idea that worked and looks wonderful: a faux wood plank floor, made using brown kraft paper. Just feast your eyes on the faux wood glory (and it’s not often that you hear me say that!)
Le #menu #royal de #Ducasse pour #Hollande et #Xi à #Versailles
Le grand chef à la constellation d’étoiles a mitonné 18 plats au chef de l’État français et à son homologue #chinois pour le #dîner privé au Grand Trianon.
Je vous laisse déguster (avec les yeux)
▻http://www.lepoint.fr/gastronomie/exclusif-le-menu-royal-de-ducasse-pour-hollande-et-xi-a-versailles-28-03-201
Revue de Presse Hebdomadaire sur la Chine du 24/03/2014
Mobile #Menu AB Tested: #Hamburger Not the Best Choice?
▻http://exisweb.net/mobile-menu-abtest
I did a previous test that seemed to show that a bordered “hamburger” (aka sandwich) icon was used more than other options.
The menu icon on the right was clicked more than the previous two.
I then decided to test the hamburger icon against the word “MENU”.
Ah ! Y’a une suite !
Hamburger vs Menu: The Final AB Test
▻http://exisweb.net/menu-eats-hamburger
The MENU button was clicked by 20% more unique visitors than the HAMBURGER button (…)
Hamburger icons may appear to be ubiquitous, but they are not the only option.
There is an issue that is much more important:
Android users are almost 3x less likely to click a navigation button than iOS users.
Résumé : en tout il a fait trois tests AB.
Le premier étant celui de l’image de @tetue, où il montre tout d’abord que la bordure autour du bouton augmente beaucoup les clics.
Ensuite dans le deuxième, il introduit le mot « menu » tout seul, avec et sans bordure.
Enfin dans le troisième, il teste uniquement entre icône et mot, mais les deux avec bordure (puisqu’on a appris avant qu’il faut vraiment avoir une bordure).
Le grand gagnant étant : le mot « Menu » seul (avec une bordure) :
Par contre, il apprend au passage que les utilisateurs d’Android cliquent énormément moins sur les éléments de navigation que les utilisateurs Apple.
Abusing Ellipses – Siolon
▻http://www.siolon.com/blog/abusing-ellipses
Recently amongst web developers there been a passionate conversation about the use of “hamburger” iconography for progressive disclosure usually showing navigation (for the record, I hate that name for the icon). Some have done extensive A/B testing to prove it alone doesn’t work well, and others write passionately how they have abandoned the pattern. This along with other examples like using a select menu for smaller viewport navigation highlights a problem with our community: we can all-to-quickly grab onto a fad without asking fundamental questions about whether it works or not.
The Ellipsis’ Traditional Use in Interfaces
I want to bring up another pattern that has recently become a big problem also: the humble ellipsis. I started seeing ellipsis iconography show up more and more over the last couple of years in web applications. Now the pattern has existed for a long time in desktop applications, but it has served a different purposes. For example, in the OS X Human Interface Guidelines, we read the following instructions for using ellipsis:
Lien avec ►http://seenthis.net/messages/397625
qui explique que de nombreux gros acteurs (sites ou applis) ont fait machine arrière et on arrêté l’approche « bouton de menu seul qui ouvre un menu caché ».
Au lieu de cela, ils sont revenus à un menu directement visible, du type « onglets », avec, lorsque nécessaire, un bouton supplémentaire permettant d’ouvrir des choses en plus : parfois c’est trois points « … », parfois c’est « More » ou « Plus », etc et ça ouvre soit un déroulant, soit une page de menu complète séparée.
Mais le plus important c’est que les éléments principaux, les plus utilisés, sont toujours visibles du premier coup.