Share
Vi har nylig lagt ut en artikkel om nåværende skift til nettleserens nettleserpåvirkning på webdesign. Dette er et stort skifte for teknologibransjen, men også for webdesignere som nå blir oppfordret til å vurdere tablettplattformen for kompatibilitet. Men samtidig er det et annet skift på gang: En overgang fra mus-sentriske grensesnitt til de som er orientert mot apps.
En webapp er, for å si det enkelt, et program som er avhengig av en internettforbindelse for å fungere. Ingenting lagres lokalt, og det er alt i skyen. Det er en rekke fordeler med dette: alt er tilgjengelig overalt, det er lite ytelsesproblemer, harddiskfeil betyr ikke tap av jobb og de fleste er kryssplattform. Derfor, til applikasjonsutviklere, er dette et attraktivt forslag som kan bety at apper er tilgjengelige for et bredere segment av deres potensielle publikum.
Det er en klar forskjell mellom en web app og en webnettstedet. Men den debatten er ikke temaet i artikkelen. I stedet ser vi på et annet skifte i webdesign, da app-sentrisk, multi-plattformsdesign blir mye mer populær og alt fra navigasjon til skjemaer påvirkes.
Dette er kanskje den største betydningen i dette skiftet. Saken med ethvert app er at det må være så enkelt som mulig for ikke å frustrere en bruker. Likevel har hver app et mål og et mål å oppnå etter en brukers interaksjon. Derfor må webapplikasjoner konsentrere seg om nøkkelfunksjonene mye mer enn et vanlig nettsted.
Hjemmeskjermen til Facebook når du er logget ut. Denne vekten er tydelig ikke bare innen webappsene selv, men også på deres plaskesider før en pålogging. Hvis vi tar Facebook som et eksempel, er den største delen av siden registreringsskjemaet fordi det er den primære siden er ment å gjøre: få flere brukere.
Det er også et sekundært, brukerorientert spinn på denne teorien. For eksempel, hvis noen fyller ut et skjema på nettsiden, er det lav sjanse for at de vil tilbakestille det skjemaet. Sjansen for at de staver sitt navn riktig første gang er større, og derfor bør det legges større vekt på innsendingsknappen.
ThemeForests innloggingsskjema har ganske stor innleveringsknapp, da dette er handlingen de fleste brukere vil ta. Det er imidlertid også linkene "Glemt passord / brukernavn" for de som trenger dem, men disse er mindre.
Denne ideen er en belastning av visuelt hierarki ved at hovedmål for en bestemt nettside er det mest fremtredende og merkbare elementet på den siden.
En annen konsekvens er en økning i en bestemt design stil av web apps selv. Har du noen gang møtt et nettsted som ser ut som det burde tilhøre din dock (eller Start meny hvis du er på Windows)? Vel, det er ganske mange eksempler som gjør at en webapp synes å være innfødt på tvers av plattformer på en elegant måte gjennom bruk av en rekke fine gradienter og skygger.
Ikke bare er dette tydelig i webapplikasjoner rettet mot desktop bruk, men også i mobil. Mange mindre utviklere velger å lage mobile webapplikasjoner over innfødte apps for å spare på kostnader og læringskurver. Ikke bare fungerer denne metoden med å lage originale webapps, men også temaer populære folk som WordPress (som denne MobileTuts + -sesjonen beskriver).
Vis brukeren hva han trenger, ikke alt han ikke gjør.
Det pleide å være en tid der, hvis du vil utføre en handling i en kompleks webapp, må du rulle rundt og gå gjennom flere forskjellige "nivåer" før du oppnår en slik ting. Men med kontekstspesifikk navigasjon er denne prosessen mye enklere. Den generelle teorien bak den er at en bruker ikke krever tilgang til alle muligheter til enhver tid, og at bare de som er relevante for hans / hennes nåværende situasjon, skal vises.
Denne typen scenario-spesifikk navigasjon oppnås vanligvis ved bruk av navigasjon på andre nivå. Den nærmeste ikke-nettbaserte analogien jeg kan komme med er mot Microsoft Office, og hvordan den bruker et båndoppsett for brukervennlighet. Nøkkelseksjoner er tittel og med et enkelt museklikk vises alle relevante alternativer.
En enkel måte å oppsummere opp er å vise brukeren hva han trenger, ikke alt han ikke gjør. Og denne samme kontekstbaserte teorien kan brukes på andre elementer som popup-moduler som viser at elementene bare kreves dersom brukeren vil ha det.
Microsoft Office er et eksempel på utbredt bruk av en kontekstuell meny. Dette virker som litt av en komme ned fra emnene vi har diskutert tidligere, men disse tre elementene kan ha stor innvirkning på et webdesign. Hvis du legger til skygger på en knapp, for eksempel, gjør du det, og kom nesten ut som et design som ikke lenger er flatt.
Vurder da å legge til skygger i et modalvindu og se på hvordan det skaper en følelse av definisjon mellom det opprinnelige innholdet og den nye rammen. Bare det kan gjøre et nettsted ser mer interaktivt ut som det blir flere lag som en innfødt app. Overvei deretter virkningene som innhold endrer ugjennomtrengelighet under forskjellige omstendigheter for å skape en samlet ny dimensjon til selve innholdet.
Valg av gradienter kan også ha en varig innvirkning på en endelig design. På samme måte som gradienter bygger opp, designet bare "popper" mer og virker 3D når det brukes i samklang med indre skygging.
Legg merke til hvordan det riktige bildet ser ut som det har to lag, mens den venstre ikke gjør det. Siden en webapplikasjon er ment å virke som et program som kjører lokalt, er en følelse av alt som fungerer sammen, avgjørende. Og den primære måten utviklere kan kommunisere denne forstanden er gjennom design. Jeg vil utfordre deg til å finne meg et webprogram som er hele brukergrensesnittet er bygd opp med rene lager HTML-elementer uten tilpasset styling.
Du kan ikke? Ingen overraskelse der! Faktum er at webdesign er ment å ha en konsekvent styling gjennom og i webapps, bruk av kontroller og innspillingsområder er store elementer å vurdere. Noe så enkelt som å legge til en egendefinert bakgrunnsfarge og overskrive grensen til en underkastelsesknapp kan gjøre en stor innvirkning på designens enhet.
Legg merke til i GMail skjermbilde hvordan bare styling av nøkkelen faller ned menyer og knapper "bare passer inn" med den overordnede designen. Oh og ja, jeg har en ordre frakt fra Angry Birds butikken! ; P
Restyling lagerelementer er en ting, men å skape nye er enda bedre. Ta MyBankTracker som et eksempel som bruker en tilpasset glidebryter som fortsatt passer inn med deres generelle hvite og blå design.
Mens jeg forsket på et alternativt perspektiv på webappdesign, fant jeg et interessant tilbud fra nåværende Microsoft Office Marketing Exec, Chris Capossela, der han sa noe i tråd med: "Da vi spurte [hvilke funksjoner brukerne ønsket i] Office, ni ganger ut av ti, de oppkalt noe allerede i produktet, de kunne bare ikke finne den ". Denne typen koblinger tilbake til hele situasjonen-optimalisert navigasjonsidee.
Da vi spurte [hvilke funksjoner brukerne ønsket i] Office, ni ganger ut av ti, hette de noe allerede i produktet; de kunne ikke finne den.
Faktum er at hvis du prøver å kramme mange funksjoner inn i et lite mellomrom, blir hver funksjon mindre viktig. Og brukeren skal tilbringe mye lengre på jakt etter funksjonen de vil ha. Og brukeren kommer til å bli frustrert. Og brukeren kommer til å forlate. Du vil ikke ha dette. For å gjøre dette til et bedre perspektiv, prøv å redusere skjermens oppløsning så lavt som mulig og start den mest brukergrensesnittet du har installert. Prøv og bruk den, og du vil ta min drift etterpå.
Et ytterligere forslag er å lytte til brukerne, men ikke for mye. Som brukere ber om flere og flere funksjoner, kan du bli tilbøyelig til å bare kaste nye alternativer her og der.
Flytte vekk fra hva du burde / kan bruke, la oss gå over bare tre viktige ting du bør ikke gjør når du arbeider på en app-sentrisk brukergrensesnitt.
Tenk deg å møte noen på gata. Du spør dem hvor de nærmeste Starbucks er, og de svarer på et annet språk. Du ser ut til å hente på et ord du oppfatter å være en kjent, men det viser seg å være feil, og det har en fullstendig forvrengt betydning. Dette høres litt lang for en anologi, men poenget jeg prøver å stresse er at du kanskje ser noe på grunn av din naturlige språk, men designeren kan sikte på noe helt annet. Hvis du for eksempel genererer overskriftene dine for å se ut som knapper, kan brukeren prøve å klikke på den, tenke det er en del av nettappappen, og kan fortsette å bli frustrert ved mangel på funksjon og forvirrende opplevelse..
Mitt første innlegg her på WebDesignTuts + diskutert form validering og det er viktig for brukerne. Som bruker vil jeg gjerne vite hva jeg gjør feil hvis jeg ikke kan jobbe med appen din, og det er alltid tilrådelig å bygge opp plass til tilbakemelding fra starten.
Design inkonsekvens er en frustrerende opplevelse som, akkurat som en bruker blir vant til en måte å gjøre ting på, blir de konfrontert med en annen. Et veldig enkelt eksempel er på Expedia, hvor avgangs- og returkalenderen bytter måneder etter hvert som du velger en dato.
Her er en kort liste over seks nettsteder og webapplikasjoner som klart viser noen av designprinsippene vi har diskutert i denne artikkelen fra innfødt appdesign til hovedvekt.
For å oppsummere denne artikkelen, er det en klar innflytelse på nettet fra tradisjonelle, native applikasjoner. Men hver designbeslutning som involverer webapplikasjoner, stammer fra brukervennlighet. Programmer må være enkle, de må ha vekt på nøkkelfunksjonene, slik at en bruker passerer gjennom nettstedet med letthet.
.
Accentsconagua