Share
Som webdesignere følger vi mange designparadigmer og layoutprinsipper: grids, vertikal konsistens, F-Layout, Z-Layout, tredjepartsregel, Golden-Ratio og så videre. Å være oppmerksom på disse prinsippene vil produsere visuelt tiltalende og funksjonell design - la oss nå se på enkel deling av en side i to like halvdeler.
Selv om dette kan høres litt dumt og tydelig i begynnelsen, kan dette grunnleggende oppsettet være svært effektivt. Øynene våre har en tendens til å følge en zig-zag-bevegelse mens du skygger gjennom en side. Hvis øyet følger en horisontalt rett linje - som i Z-layoutet, konsentrerer han seg (eller prøver å). Siden 90% av webtrafikken som kommer til nettstedet ditt, betaler ikke detaljert oppmerksomhet til siden din, noe som gjør at designen "skinn vennlig" definitivt vil betale seg.
Fra Yahoo! S Eye tracking studier:
Web-brukere har alltid det travelt. De har andre ting å gjøre, og å holde seg bak for å sette pris på skjønnheten og estetikken til nettstedet ditt er det siste du kan forvente at de skal gjøre. Selv om god design er av stor betydning, inspirerer det ikke en besøkende til å handle - for å klikke på "Kjøp nå" eller "Vise mer" -knappen.
Vi kan ikke klandre dem. Noen gang husker når du ville se noe opp? Du skynder deg til det første søkeresultatet i Google, og så raskt du "strøm" gjennom, eller heller skum gjennom hele siden. Mesteparten av tiden ruller du selv helt til bunnen uten å betale betydelig oppmerksomhet. Etter denne fasen, hvis du bestemmer deg for at siden er verdt tiden, ruller du tilbake til toppen og tar den faktiske innsatsen for å lese og ta hensyn.
Hva er formålet med den første skimming? Å få tak i den maksimale informasjonen du kan få om siden ved første øyekast. Hvis vi 'codify' dette skimming mønsteret, bør vi kunne få tak i flere besøkende. Fra observasjoner ved varmekort på forskjellige steder har jeg gjort en felles tendens.
Du vil legge merke til at du kan se på de røde stedene uten problemer. Merkelig, fra vår erfaring, kan vi si at øynene våre lett skal følge rette linjer fremfor vinklede - siden vi leser i rette linjer. Legg merke til at jeg snakker om den første skimmingfasen, ikke den delen der du tar hensyn til alle detaljer på nettstedet.
Når du ikke betaler mye oppmerksomhet, er dette den naturlige tendensen til øynene dine - zigzaggen. Med mindre det er elementer som har større kontrast og vekt som roper ut på deg, vil du trolig følge ovenstående mønster. Du vil også merke at dette mønsteret ligner F-layoutet og at de røde sluttpunktene er der brukerne tar en kort pause.
Disse øyeblikkelige pauseflatene er hvor et øyeblikksbilde tas av hjernen din. I en zigzag-oppsett med elementer som inneholder viktige deler av informasjonen på "Pause spots", absorberer hjernen naturlig flere detaljer, da det knytter hvert zigzag-endepunkt som separate enheter.
Design er ikke bare hvordan det ser ut og føles. Design er hvordan det fungerer. -Steve Jobs
Du kan (for eksempel) bruke denne funksjonen i Half Split-layoutet til å effektivt plassere forhåndsvisninger av arbeidsporteføljen, eller de viktige funksjonene til produktet eller tjenesten, slik at de besøkende raskt legger merke til det. Dette oppfordrer til slutt dem til å bli mer tid på nettstedet ditt, og dermed overbevise dem om å gjennomføre handlinger. Resultatet? Bedre konverteringsfrekvenser for deg og en bedre brukeropplevelse for dem.
Å lage design og layout "Zig-Zag-kompatibel" er veldig enkelt. Faktisk er det like enkelt som å dele siden i to like halvdeler! De like halvdelene fungerer bra fordi Zig-Zag-endepunktene er justert mer eller mindre mot midten av disse halvdelene. Brukes i superposisjon, de går godt sammen. Plasser elementer av betydning ved den røde endepunktsposisjonen til Zig-Zag på siden din. Dette er grunnleggende konseptet bak Half Split, eller 1/2-Layout.
Nylig jobbet jeg på en "Kommer snart" destinasjonsside. Jeg eksperimenterte med ulike oppsett, men ingenting fungerte bra. Jeg prøvde alt - Grids, Golden ratio, F-Layout. Eureka-øyeblikket kom da jeg bare delte siden i to like halvdeler. Løsningen var like enkelt som det! Det så elegant og pent ut og minnet meg om det viktige faktum at enkel ikke nødvendigvis er dårlig. Har du sett den nye Microsoft-logoen?
Enkelhet er den ultimate sofistikeringen. -Leonardo da Vinci
Du kan se hvordan halvdelene gir et fint visuelt hierarki. Først blir "Rødt bånd" rødt bånd øverst lagt merke til. Deretter ses logoen. Nå, etter å ha fulgt Zig-Zag jeg nevnte tidligere, slutter den besøkende å se på skjermbildet Bilde i høyre side og til slutt, formularen for innsendelse av e-post.
La oss nå se hvor godt delt layout fungerer for en porteføljeside for en webdesigner. Målet med en galleriside i en portefølje er å raskt vise potensielle kunder en arbeidsgruppe. Det er mange alternativer for dem, da denne næringen er ganske mye mettet akkurat nå. Hvorfor skal de betale deg? Å gjøre et godt førsteinntrykk kan tippe skalaene i din retning. La oss se hva vi kan gjøre med det.
Ovennevnte layout er delt inn i to halvdeler, men det følger ikke zig-zag-prinsippet som jeg nevnte tidligere.
Selv om det virker som en god layout og lett på øynene, blir det ganske kjedelig etter de to første elementene. Å bryte strømmen for å øke visuell interesse vil hjelpe. Ikke bare det; men når du prøver å skumme ovenstående layout, bør øynene se det første bildet, og deretter hoppe til teksten til det andre elementet. Siden de besøkende ikke har noen intensjoner om å lese i denne fasen, hopper de til et annet punkt, eller forlater nettstedet ditt helt!
Hva om du gjorde en enkel endring som dette?
Mye mer interessant, ikke sant? Bare bytte plasseringen av teksten og bildet av hvert element øker visuell interesse, slik at konsistensen ikke gjør din besøkende kjedelig. Du kan også ringe til handlingsknappen etter Zig-Zag-mønsteret.
Knappen "Kontakt meg" vil nå ha større sjanse til å bli lagt merke til, og klikket av flere av dine besøkende (hvorfor ikke kjøre en A / B-test for å dobbeltsjekke det?)
Design er en plan for å arrangere elementer på en slik måte som best for å oppnå en bestemt hensikt. -Charles Eames
Split-oppsettet har gått inn i rampelyset med Facebooks nye tidslinjedesign. Legg merke til hvordan øynene dine enkelt "flyter" fra ett innlegg til et annet.
Apple følger også delt layout. Her er iPad mini-siden, se hvor enkelt det er å knytte hvert bilde som separate funksjoner på iPad mini? Det føles bare riktig.
Microsoft har blitt kreditert for å banke mange nye måter med deres nylig rebranding, her følger en delt layout på deres Surface info side.
Stacey er en minimalistisk skildring av 1/2-Layout.
Jeg elsker Quoras hjemmeside. Kan splittoppsettet bli demonstrert noe enklere?
Consumerbarometer.com tar det til neste nivå med animasjoner og en trekantig variant av Zig-Zag.
Så, hva har vi lært?
Denne artikkelen er bare en mild påminnelse om at bruk av grunnleggende layouter og grunnleggende designmetoder aldri bør glemmes. Faktisk kan det øke konverteringsfrekvensene, hvis de brukes riktig.
Accentsconagua