Är tiden med rullgardinsmenyer över? Det kan väl vara. Detta mönster fungerar inte för dagens användare. Konceptet är klumpigt och översätter inte alltid bra till mindre skärmar.
Användare vill ha menyer och navigationsalternativ som är enklare att använda, enkla att förstå och inte med fler alternativ än vad de kan tänka på om några sekunder. Navigationsmenyerna ska vara agnostiska och fungera på samma sätt, skapa en enda upplevelse, över enhetstyper. Så vad kan du göra för att säga adjö till de nedrullningsbara menyerna? Vi har fem alternativ.
1. Rullningspaneler
Oavsett hur du gillar din rullning, med hjälp av rullningseffekter som parallax eller paneler för att leda användare till en annan del av webbplatsen är en effektiv navigationsstil. Medan många av oss (själv medföljer) gav rullningen upp för döda för några år sedan, har mindre skärm hjälp att rulla mönster återkommer som en mycket användbar funktion över alla enhetstyper.
Användare är inte rädda för att flytta ner på sidan, så du behöver inte ställa in varje länk eller lite information på den första skärmen. Använd HTML5 till din fördel och bygg en sida som gör navigering del av en uppslukande användarupplevelse. (Så immersiv faktiskt att användare kanske inte ens känner igen navigationen för vad det är.)
För att få det att fungera måste du göra mer än bara skapa en långsida med en massa länkar. Designen måste komma med påverkan. Cue användare till vad du gör. Skapa visuell separation med färg mellan? Skärmar? och inkluderar stora klickbara områden som berättar användarna exakt var de ska gå nästa.
Om du har problem med att vissa användare kanske behöver den mer traditionella webbplatskartan, anser du att den är borta i sidfoten. Du kommer att sluta med en mer strömlinjeformad design och behåll de länkade objekten fortfarande på en enda plats för gamla skolanvändare.
2. Dolda Hamburgare
Innan du hoppar in i? Jag hatar hamburgerikoner? rant, tänk på det en stund. Gilla det eller inte, det här har liten ikon har förvandlats till en symbol för en pop-out, svängning eller på annat sätt dold meny. Användare verkar förstå det. Och medan många designers verkar förlora det, kommer du antagligen att sluta använda det ändå.
Så sluta slåss det.
I stället jobba med att utveckla bättre sätt att integrera ikonen i din övergripande navigationspatter. Jag är helt grävande hamburgare ikoner som öppnas i minimalistiska helskärm menyer just nu, som Trivium Art History, ovan.
Tricket här är enkelheten. Menyn är fet, ger användarna bara några val och är lätt att använda på vilken enhet som helst. Vem behöver dussintals menyalternativ längre, hur som helst? En betydande del av användarna kommer att landa på din webbplats från en sökmotor på en inre sida. Antalet användare som skriver in din webbadress direkt och sedan flyttar genom navigering på plats krymper hela tiden.
3. Kortstil Navigation
Kort, kort och fler kort. Det verkar som designers (och användare) kan få nog av dem. Så varför inte göra kort ditt favoritnavigering / menyalternativ?
Börja med ett kortmönster på hemsidan som är en helskärmsupplevelse. Varje kort tar sedan användarna till en annan del av webbplatsen. Tanken är så enkel och intuitiv att alla användare ska kunna navigera i flödet och hitta det de letar efter med lätthet.
Som en tilläggsbonus faller kortvariga kort då? på mobila enheter så att upplevelsen är liknande över plattformar. (Användarna kommer att älska dig för detta.)
För att blanda upp designen, tänk utanför boxen med ditt kortstil Blanda olika kortstilar - text, bilder, video - så att användarna dras för att se över skärmen och interagera med flera element. Katvig, ovanför, gör ett bra jobb med att integrera flera kortstilar, färg och enkel animering för att uppmärksamma specifika element.
4. Sticky Menyer
Enkel och användbar. Klibbiga menyer är ett enkelt sätt att hjälpa användare att flytta igenom din webbplats. Skapa en enkel menystruktur med bara några viktiga element och se till att det klibbiga elementet befinner sig och låser till en viss position på skärmen.
För det mesta är dessa menyrader stora och kollapsar sedan i en mindre version som toppen av skärmen på varje sida. (Det är svårt att bli mer användarvänligt än detta.)
Webbplatsen Bloomberg Mayors Challenge gör ett bra jobb med sin klibbiga meny. Menyns position flyttas från mitt skärm till toppen av hemsidan (och på alla menysidor på toppnivå), vilket ger visuellt intresse och pinnar med alla andra sidor på webbplatsen. Vidare ger menyn dig några andra saker som användare kanske vill ha, till exempel sociala medierikoner för snabb åtkomst och en snabbväxlingsväljare för språk.
Denna enkla lösning är en av de mest användarvänliga sakerna du kan göra. Det är därför klibbiga menyer är en populär säljfunktion för många? Boxed? webbplats teman. (Det är lite överraskande att fler webbplatser inte använder dem.)
5. Vertikal Sidomycke
Det är en populär funktion för två av de populäraste platserna i världen - Twitter och Facebook - men inte många andra webbplatser utnyttjar vertikal sid menynavigering. Kanske är det dags att börja.
Båda sociala medier placerar viktiga element i sidebar-esque navigationselement. Den tunna vertikala kolumnen är utmärkt för att hålla mycket enkel textinformation och göra det enkelt att se på en blick.
Oavsett om du väljer en meny på vänster eller höger sida av skärmen är det upp till dig. (Det finns för och nackdelar med någon av alternativen.) Jag skulle tänka på hur navigeringen fungerar med andra bilder. Har resten av webbplatsen ett riktningsdrag till ena sidan eller den andra? Kan den dominerande bilden leda användaren att titta på navigeringen? Tänk på elementen tillsammans på ett stort bild sätt för att skapa bitar som arbetar tillsammans för en singular, enhetlig känsla.
5 fantastiska resurser
- Web UI Design Best Practices ebook
- CSS-fragment: Enkel horisontell navigering
- ? Dropdowns ska vara UI för sista utväg? och hur man skapar bättre former
- NavNav Responsive Navigation Examples
- ? 10 Fantastiska HTML-mallar för nedladdning?
Slutsats
Navigationsmönster och menystilar är en utvecklande del av webbdesign, men många av trenderna är långsammare att utveckla än på andra ställen. Detta kan bero på komplexiteten vid utformning av olika stilar för detta väsentliga element eller försiktighet från designers som håller tillbaka för att se vad som resulterar i mer accepterade användarmönster.
Lektionen här är här: Enkel navigering är bättre. Om du använder clunky, överväldigande nedgångar, är det dags för en förändring. Ge järnet.