Experimentella navigationsmönster för designtrender

Långt borta är tanken att navigeringsmenyerna måste sättas högst upp på en webbdesign. Medan många designers väljer säker, konsistens av alla kapsnavigeringar överst på skärmen med sans serif typografi bryts flera mönster ut ur detta mönster.

Experimentella navigeringsmönster kan vara roliga och intressanta om de är intuitiva för att användarna ska kunna förstå någorlunda snabbt. Olika navigeringsstilar kan ge intresse för webbplatser som är små, har inte mycket innehåll eller vill att användarna ska flytta på ett visst sätt.

Medan experimentell navigering inte är för varje design, kan det vara ett roligt alternativ för rätt projekt.

Sidnavigering

Det finns många sätt att göra sidnavigering. Den kan vara statisk eller dynamisk och kan vara nästan vilken som helst bredd.

Medan det inte verkar som att flytta navet från toppen till sidan är allt det experimentella, kan det kasta ganska skiftnyckeln in i din design eftersom det ändrar bildförhållandet på duken.

Då måste du överväga hur den här ofta milda navigeringsfältet kommer att se på andra skärmstorlekar. Och vad gör du om navigeringsmenyn innehåller långa ord (du vill inte ha en navfält fylld med bindestreck)?

Det är mycket att tänka på.

Den bästa sidnavigeringen är enkel, med korta ord och ett fast utrymme. För mycket rullning i nav är krossning och svår att förstå. Exemplet från Sanctum ovan är enkelt och rent. Naven förblir på ett ställe som användaren rullar, med texten justerad endast från ljus till mörk när bakgrunden ändras.

Det fina med det här exemplet är att det vertikala navigeringsmönstret uppmuntrar användarna att först titta på namnet och logotypen och sedan flytta i rak linje ner på skärmen för att se vilka navigeringsalternativ som finns tillgängliga. Det är väldesignat och funktionellt.

Dold och Pop-Out

En av de stora sakerna som har uppstått av den produktiva användningen av hamburgare och annan dold navigeringsnavigering är pop-up menyer.

Klicka eller knacka på knappen och navigationen svänger ut som täcker en del eller hela skärmen (ofta beroende på skärmstorlek).

I sig är detta inte riktigt experimentellt. Men det faktum att så många designers gör det så många olika sätt är. Medan användarna antagligen brukar vänja sig på hamburgerikoner, är dessa mönster fortfarande lite obekanta. Och med designers som använder olika ikon typer, det finns också en liten utmaning där.

Ändå är pop-out-stilen från Caava Design, ovan, intressant. Medan de flesta designers går med platta, enkla pop-out-variationer, har den här djupare djup. Designen hjälper användarna att hitta de viktigaste delarna av navigeringen för att leda dem genom designen.

Horisontell Scroll

De första gången du kör över en horisontell rullningsplats kan vara lite udda. Det tar en specifik design för att flödet ska känna sig rätt på grund av den underliga skillnaden i fysisk och visuell rörelse.

För att göra det mesta av horisontell rullningsnavigering bör designers använda visuella signaler för att göra idén bekvämare för användarna. Pilar eller andra riktverktyg kan vara till hjälp.

Norgram, ovan, använder också en partiell bild som en visuell signal att det finns mer innehåll på sidan av skärmen med en fast topp till botten utseende. Innehållet är strukturerat på ett sådant sätt att den horisontella rörelsen verkar mycket mer naturlig på grund av de visuella indikatorerna som tillhandahålls.

Ingen navigering

Vissa webbplatser eliminerar navigering helt och hållet och väljer ett allt på skärmstilen. Det kan vara ett knepigt mönster säkert. Kommer användarna att veta vad de ska klicka och vilka åtgärder som ska vidtas?

Den? Ingen navigering? navigationsmönstret fungerar bäst för super små webbplatser som riktar användare att göra en sak. Det kan fungera för en snart kommande sida eller en tack / recap-stilwebbplats som året i översynssidan ovan. Med bara en handfull klickbara objekt och en kort rullning är det enkelt att räkna ut.

Den enkla animationen i designen hjälper också. (Du kan förmodligen kalla det navigering eftersom det uppmuntrar användarrörelsen). Det kan vara ett knepigt mönster att säga minst.

Enkel sida med markörer

Många av de experimentella navigeringsmönstren som används distribueras på ensidiga webbplatser. Och med god anledning: Det är mycket svårare för användarna att gå vilse i ett sidformat.

För att ge riktning och hjälpa användare att känna att de gör framsteg i designen, är många av dessa sidor för navigationsmönster beroende av markörer. Precis som det traditionella reglaget format med en punkt eller en streck för att notera framsteg, använder denna navigationsstil samma begrepp.

Socius ovan gör ett mycket bra jobb med detta med markörer på höger sida av sidan som innehåller svängtext som berättar användarna vad varje prick representerar. (Det här är en funktion som ofta saknas med den här navigeringsstilen.) Användare kan använda svängningseffekten och punkterna för att hoppa till specifik information eller bläddra igenom de sju? Skärmarna.?

Tricket till denna stil av design är att få allt att känna sig snabbt. Smarta rullningseffekter och en smältbar design, som visas i det här exemplet, hjälper dig att vägleda användarna genom innehållet.

Subtil Edge Nav

Vissa konstruktörer vänder navigering 90 grader och förankrar den till höger på sidan. Det är ett subtilt trick som främst är för små eller portföljstilsidiga webbplatser som dyker upp vanligare.

Navigationselement i denna stil tenderar att vara text bara, innehåller bara en handfull objekt och är generellt små. Den roterade navigeringstexten kan peka in eller ut ur konstruktionen, baserat på andra element på skärmen.

Precis som med vertikal navigering kan den här ideen förändra designens övergripande bildförhållande, eftersom en sliver skärs från sidan för navigering. Oroa sig för den här stilen är att navigeringselementen är subtila och små, vilket gör dem lätt att missa.

Slutsats

Är du mer av en traditionalist när det gäller navigering, eller är du villig att prova något lite annorlunda? Experimentella navigeringsmönster är en av de trender som verkar få traction.

Eftersom fler konstruktörer försöker med sådana tekniker, blir användarna vana vid förändringen och anpassar sig. Men det är alltid att oroa dig för användare som inte får det.? Jag skulle gärna veta vad du tycker om olika navigeringsstilar. Låt mig veta på Twitter och tagga @designshack.