UX Design 10 saker som resewebbplatser kan lära dig

Har det någonsin krossat dig att du fortfarande kan växa professionellt medan du planerar dina semester? Populära resewebbplatser, bokning och checkout formulär, reseplanerare och hotell tidtabeller är alla utmärkta källor till förbättra din kunskap inom området användarupplevelse design.

Medan du väljer de bästa platserna, hotell och schemalägger din resa, är det en bra idé att uppmärksamma vad som fungerar och vad som inte gör det som inspirerar dig och det som gör att du direkt hoppa till en annan webbplats. Dina reaktioner, glädje och aversioner är alla stora kännetecken för effektiviteten av webbplatsens användarupplevelse design.

I den här artikeln kan du lära dig 10 lektioner om användarupplevelse som du kan hämta från populära resesidor.

Skillnaden mellan UI och UX

UX är inte UI, det är som en oskriven lag. När du läser om en användares användbarhet måste du tänka på användargränssnittet (användargränssnittet). Användargränssnittet är a uppsättning olika visuella element till exempel menyer, knappar och ikoner som dina besökare använder (klicka på, sväng på, tryck på) när de interagerar med din webbplats.

Användbarhet är en kvalitet som beskriver användargränssnittet (användargränssnittet). Användbarhet visar effektiviteten hos användargränssnittet, t.ex. hur enkelt det är att använda en webbplats (Lärbarhet), hur snabbt användare kan uppnå angivna mål (effektivitet), hur lätt kan de komma ihåg sina minnen om hur webbplatsen fungerar (memorabilitet), och hur trevligt det är att använda (användartillfredsställelse).

Användbarhet är en aspekt av ett mer komplicerat begrepp som heter användarupplevelse (UX). Användarupplevelse innebär allt som påverkar användarens upplevelse - antingen negativt eller positivt. En bra UX möter alla behov av potentiella kunder - bra användbarhet och många andra saker.

Enligt användarupplevelseforskningsfirman Nielsen-Norman Group:

1. Ge användarna en plats att starta

Först och främst behöver du ge dina besökare en plats där de kan börja. Det är oftast den hemsida som får flest klick, inte bara för att den är huvudingången till en webbplats, men när användarna kommer från en sökmotor kommer nästa klick sannolikt att vara hemsidan.

Därför behöver du erbjuda ett engagerande innehåll och layout på hemsidan om du vill behålla dina besökare på din webbplats.

Booking.com hemsida visar att de förstår sina kunders behov väl. Tänk på det. Vad vill du göra på en resesida? Du vet antingen vart du vill åka och vill se upp möjligheterna så fort du kan, eller du är osäker på resans läge och behöver lite inspiration.

Booking.com placerade en generellt sökformulär på vänster sida av sin hemsida för dem som är säkra på deras framtida resa. Besökarna behöver inte slösa sin tid på att bläddra genom irrelevant innehåll. Detta lämnar dem med ökad beslutsamhet och ett ökat självförtroende.

Det återstående utrymmet på skärmen över veckan ger en hel del inspiration till de mindre bestämda: tre stora bilder av populära platser (Abu Dhabi, New York City och Dubai) ger förslag, en AJAX-ström om “Bara bokad” resor visar vilka andra användare som är närvarande, och det finns till och med en liten sektion som garanterar potentiella kunder om den fria avbokningsreglerna.

På Booking.com hemsida får alla de nödvändiga incitamenten och positiva känslor att fortsätta på webbplatsen innan de till och med rör rullefältet.

2. Gör din navigering uppenbar

Om du vill att användarna ska stanna på din webbplats måste du ge dem en tydlig och användarvänlig navigering.

TimeOut.coms navigering är som en smart värdinna: det ger besökare värdefull hjälp när de behöver det men inte stör dem. Om du tittar på bilden nedan kan du se att navigationssystemet har fyra olika element: en stor, lättigenkännbar sökfält, en huvudmeny med tydligt definierade objekt (City Guides; Film; Musik; Konst & Kultur; Mat & Dryck; Om Oss; Time Out Shop), en väl utformad breadcrumbs bar och en sidostjärna Lista över de mest populära städerna.

TimeOut utformade sitt navigationssystem på ett sådant intuitivt sätt som ger besökarna ytterligare incitament att utforska webbplatsen. Den lilla miniatyrbilden intill varje sidobar ger en visuell nyckel, den korta beskrivningen under rubriken Food & Drink säkerställer besökare att de är på rätt plats, breadcrumbs gör det super lätt att gå vidare, och den övre sökfältet hjälper användarna att hoppa till nästa plats om de är uttråkad med den nuvarande.

Varje element stöder de andra - ett tydligt tecken på stor UX-design.

3. Använd High Impact Imagery

Skärmdumpen nedan är en av våra restaurangprofilsidor. Jag är säker på att du redan läst att lagerfoton inte ger en bra användarupplevelse: de brukar bära besökare och inte motivera dem att gå vidare i konverteringstratten.

Alternativet av lagerfoton är högkänslig bild som väcker starka känslor hos användarna. Och vi vet alla det ökade känslor leder till högre kundlojalitet.

Resesidor brukar alla använda högkvalitativa bilder, men TripAdvisor tar det till nästa nivå uppmuntra användare att lägga till egna foton till varje restaurang. På så sätt kryddar vi upp innehållet med Användargenererade bilder som vanligtvis är mer intressanta för den genomsnittliga resesidan besökare än foton tagna av proffs.

Peer press är trots allt en av de starkaste motivationerna. TripAdvisor också håller sitt visuella innehåll friskt genom att lägga till högupplösta foton sköt av användare.

4. Håll det enkelt

Mindre är oftast mer så det är alltid en bra idé att hålla sakerna enkla och fokusera på endast relevant information. Världen är så full av distraheringar att dina besökare säkert kommer att vara tacksamma om du sparar dem från onödigt fluff.

“Håll det enkelt” är UX-principen som Lonely Planet till synes följde på sin hemsida. De viktigaste ämnena som intriger deras användare är arrangerad i ett snyggt rutnät av attraktiva miniatyrbilder stöds av en eller två ord långa rubriker.

LonelyPlanets hemsida är särskilt smart från användarupplevelsen eftersom miniatyrerna också fungerar som navigering medan de ge användarna en lättförståelig visuell nyckel.

Nätet är lyhörd, så det fungerar på alla visningar. På mobil- och tablettstorlek ser miniatyrerna ut som ikoner för mobilappar vilket är en välbekant layout för alla mobila användare, och förtrogenhet är också något som ger besökarna tröst och därmed ökar sitt engagemang med webbplatsen.

5. Använd Action Verbs

Du är troligen bekant med handlingsverken från karriärwebbplatser. Åtgärdsverken engagerar inte bara rekryterare som skannar genom CV, men även webbplatser som besökare surfar på webben.

Det populära sociala nätverket för boendedelning, AirBnB använder dem överallt på webbplatsen. Tillhöra var som helst, Hyra, Lista ditt utrymme, Upptäck platser, Utforska världen, Se där människor reser, Dela med sig din erfarenhet, etc..

Action verb är otroligt effektiva eftersom de Flytta användare från ett passivt tillstånd till en aktiv. Positiva erfarenheter kräver alltid aktivitet på uppdrag av användaren. det är därför äventyrsparker är så populära.

När allt kommer du ihåg mer? Något du gjorde själv eller något du bara läste i en bok? Se? Interaktion engagerar dig också. Så om du vill öka webbplatsens användarupplevelse, tveka inte att använda åtgärdsverken där de är lämpliga.

6. Förbättra dina formulär

Som för komplicerade former leder ofta till en omedelbar övergivelse Det smartaste du kan göra för användarens upplevelse är att effektivisera formulären på din webbplats så mycket som möjligt. Vad menar jag under effektivisering?

Du kan se ett utmärkt exempel om du tittar på Priceline.coms universella sökformulär på deras hemsida. Pricelines sökformulär är gömd inuti en praktisk horisontell flikarnavigationssektion.

Flikarna innehåller fem olika sökformulär relaterade till de fem områdena (Hotell, Flyg, Bilar, Semesterpaket, Kryssningar) Företaget är inblandat i.

Den riktigt coola grejen här är att användarna inte behöver bry sig om saker de inte är intresserade av, de kan hoppa direkt till sökformuläret de behöver. Därför är de inte belastas med extra datafält, Formfälten hålls till ett absolut minimum, vilket betyder ökad effektivitet, minskad irritation och snabb förståelse - den bästa användarupplevelsen någonsin.

7. Gör inverkan på personliga berättelser

Du kan öka användarengagemanget med den smarta användningen av personliga berättelser, som du faktiskt upplever, på GoBackpackings.com: s hemsida..

Äventyrs äventyr är alltid mer intressanta än överraffinerad marknadsföring. Dina besökare vill inte läsa samma tråkiga klichéer som de kan läsa på din konkurrents webbplats - de kan till och med skapa samma slagtåg av sig själv trots allt.

Recensioner, betyg, riktad och modererad kommentar, status, blogginlägg, personliga berättelser, rekommendationer, allt lägger till personlighet på din webbplats därför introducerar högkvalitativ information som dina besökare kan känna sig emot.

GoBackpacking fyller sin hemsida med personliga berättelser om sina användare som gör att besökarna omedelbart fördjupas i innehållet på webbplatsen utan att ens veta det.

8. Inkludera relaterade produkter

Relaterade, rekommenderade och populära produkt widgets används av alla de stora e-handelsspelarna, så det är inte en stor överraskning att resebyråerna också tar hävstång av dem.

HotelTravel.Com löser uppgiften på ett mycket knepigt och effektivt sätt. Dess rekommendationsmotor tar platsen besökaren letar efter - i vårt fall är det Hongkong - och visar lite mer Hotellalternativ rekommenderas av andra användare. De relaterade hotellen är också de rekommenderade, en 2-i-1-lösning som alltid är en bra idé.

Designern av HotelTravel.Com tog ett steg längre och de placerade relaterade produkter till ett praktiskt dragspel som gör att användaren kan grupprekommendationer enligt fyra olika kriterier (bästa värde, bästa service, bästa rumsstandard, bästa läge).

För att göra widgeten visuellt intressant betyg, är priset, en liten miniatyrbild och ett kort citat från den senaste översynen också inkluderad i ge maximal hjälp till besökare att bestämma vilket boende som passar bäst för sina behov.

9. Prata om förmåner

Visa besökare de fördelar de kan få på din webbplats är alltid mer användarvänliga än att plåga dem med torra fakta som gör att de somnar.

På Booking.coms hemsida kan vi se ett smart utnyttjande av denna UX-designprincip. På höger sida av skärmen kan du se “Varför använd Booking.com?” avsnitt som inkluderar sex fördelar som alla överensstämmer med värdena för den genomsnittliga resenären (lågt pris, val av bräda, användarvänlighet för gränssnittet, populärt granskningssystem, kvalitetskundservice och tillgänglighet 24/7).

Naturligtvis utarbetas dessa värden i en mer engagerande sätt och kom med länkar där potentiella kunder kan fortsätta. De “Varför använd Booking.com” widgeten är faktiskt den förbättrade versionen av det vanliga “Funktioner” sektion av en genomsnittlig småföretag webbplats men det innehåller många stödjande element.

De färgglada ikoner, de markerade länkarna och de specifika uppgifterna (som “701.118 fastigheter över hela världen”) alla gör att användarna tror att de är på en professionell webbplats som de kan lita på. De showcase av populära platser från Sydney till Dublin på vänster sida och den lilla widgeten från tredjeparts ReviewCentre stöder upplevelsen och bygger förtroende.

10. Ge socialt bevis

När folk pratar om socialt bevis menar de vanligtvis sociala medier widgets som Facebook Likebox som också är ett utmärkt element i väl utformad UX, men TripAdvisors hemsida ger ett bra exempel hur andra former av socialt bevis fungerar.

Begreppet socialt bevis bygger på en psykologisk princip som säger att människor är mer benägna att göra någonting om de ser andra omkring dem gör samma sak. Extern validering är en stor motivation för de flesta av oss bygger så kloka formgivare socialt bevis på sina webbplatser på ett sätt som uppmuntrar besökare att upprepa deras medarbetares beteende.

På TripAdvisor engagerande Socialt innehåll är inbyggt i en praktisk fliknavigering med tre avsnitt: Hotellrecensioner, Foton av användare och forum. Titeln på widgeten är “Vad resenärer pratar om” vilket är mindre påträngande än den genomsnittliga undertexten på kommersiella platser det fångar därför besökarens öga på en gång.

Hotellrecensionerna är utformade på ett smart sätt som gör innehållet lätt att smälta: ett litet profilfoto och rankningen av granskaren, namnet på det övergripande hotellet, en kort citat från granskningen själv och en betygsymbol som passar väl till webbplatsens allmänna utformning.