8 kodavsnitt för att få din sida att sticka ut

Sökning är ett av de där små designbehoven som ofta förbises. Men för bloggar och andra innehållsrika webbplatser är det ett viktigt sätt att navigera. En väldesignad meny kan uppmuntra användare att utforska vad den har att erbjuda.

Tro det eller ej, det finns designers som vågar ta paginering till nästa nivå. Här är några mycket kreativa kodavsnitt som du kan använda för att förbättra din egen webbplats.

Enkel och intuitiv rullningseffekt

Vårt första exempel visar hur några grundläggande rullningseffekter kan förbättra standardpaginering. Den superunderstrykning som följer med markören gör den till en mycket mer intuitiv upplevelse. Hela menyn är också mycket lätt att läsa. Detta är ett enkelt sätt att hjälpa användare.

Live-konto

En av de mest frustrerande delarna av sökning kan vara hur menyerna hanterar ett stort antal sidor. Det här utdraget använder jQuery för att automatiskt rensa sig själv för att visa sidnumret intill när du klickar. Det är ett mycket enklare sätt att gräva in på en webbplats.

Handfat

Detta är ett mycket intressant koncept. Det här användargränssnittet är utformat för att vara mer lyhört och tillgängligt och innehåller flera sätt att navigera på, inklusive via tangentbordet. Tidslinjefältet längst upp markerar tydligt den aktuella sidan och ger en bra översikt över allt tillgängligt.

Låt Yeti ta hand om det

De säger att det är svårt att hitta bra hjälp. Men det här utdraget erbjuder Yetis hjälp (åtminstone Yetis hand) genom att klicka på sidnumret. Även om Yeti kanske inte passar bra för hans motiv, här är ett exempel på hur vi kan lägga till ett element av kul (och överraskning).

Förbättringar för mobilskärmar

På mindre skärmar kan sökning vara svår att använda. Navigeringselement är ofta för små och svåra att läsa. Det här utdraget är ett utmärkt alternativ för mobila enheter. Varje element är större eftersom navigeringen expanderar vertikalt. Som ett resultat kan mobilanvändare rulla utan att skissera eller zooma.

Inget nummer behövs

Ibland behöver vi inte numrera varje sidnumreringselement. Detta exempel är minimalt tilltalande med användning av poäng, inte siffror. Det är en utmärkt lösning för att presentera eller navigera genom flera innehållsförteckningar.

Vänlig kontakt

Mobilt gränssnitt fungerar bäst när du svarar på användarberöring. Här har vi en paginering som gör att användaren kan dra till nästa eller föregående objekt. Denna lilla bekvämlighet kan göra hela skillnaden i användbarhet.

Oändliga kombinationer av rullning/sökning

Designers använder ofta oändlig rullning för att ersätta paginering. Men här är ett tydligt koncept för hur de kan kombineras. Frustrationen med oändlig rullning är att det kan vara svårt att gå tillbaka och hitta just det objektet i en lång lista. Det här skriptet lägger till nya sidnummer i navigeringen när du fortsätter att rulla nedåt, vilket gör det lättare att återvända.

Flytta sidan framåt

En bra webbdesign ignorerar inte de olika elementen som utgör en sida. Experter har tidigare visat att paginering har mer att erbjuda när du försöker förbättra den. Så ta inspiration från dessa exempel och skapa sidbrytningsmenyer som ser ut och fungerar bättre.