Share
We hebben onlangs een artikel geplaatst over de huidige verschuiving naar de invloed van tablet browsing op webdesign. Dit is een belangrijke verschuiving voor de technologie-industrie, maar ook voor webontwerpers die nu worden aangemoedigd om het tabletplatform te beschouwen als compatibiliteit. Tegelijkertijd is er echter een andere verschuiving gaande: een overgang van muisgerichte interfaces naar apps die op apps zijn gericht.
Een web-app is, om het simpel te zeggen, een applicatie die vertrouwt op een internetverbinding om te kunnen functioneren. Niets wordt lokaal opgeslagen en het zit allemaal in de cloud. Dit heeft een aantal voordelen: alles is overal toegankelijk, er is weinig prestatieprobleem, het defect van de vaste schijf betekent niet dat er werk verloren gaat en de meeste zijn platformonafhankelijk. Daarom is dit voor applicatie-ontwikkelaars een aantrekkelijke propositie die zou kunnen betekenen dat apps beschikbaar zijn voor een breder segment van hun potentiële publiek.
Er is een duidelijk verschil tussen een web app en een webplaats. Dat debat is echter niet het onderwerp van het artikel. In plaats daarvan kijken we naar een andere verschuiving in webontwerp, omdat app-centraal, multi-platformontwerp een stuk populairder wordt en alles van navigatie tot formulieren wordt beïnvloed.
Dit is misschien de grootste betekenis in deze verschuiving. Het geval met elke app is dat het zo eenvoudig mogelijk moet zijn om een gebruiker niet overmatig te frustreren. Toch heeft elke app een doel en een doel om na de interactie van een gebruiker te bereiken. Daarom moeten web-apps veel meer op de belangrijkste functies concentreren dan een conventionele website.
Het homescreen van Facebook wanneer uitgelogd. Deze nadruk ligt niet alleen binnen de webapps zelf, maar ook op hun splash-pagina's voorafgaand aan een login. Als we Facebook als voorbeeld nemen, is het grootste deel van de pagina het registratieformulier, want dat is wat de primaire pagina moet doen: meer gebruikers krijgen.
Er is ook een secundaire, gebruikersgerichte draai aan deze theorie. Als iemand bijvoorbeeld een formulier op de webpagina invult, is de kans klein dat ze dit formulier opnieuw willen instellen. De kans dat ze hun naam meteen de eerste keer spellen, is groter en daarom moet er meer nadruk worden gelegd op de knop Verzenden.
Het aanmeldingsformulier van ThemeForest bevat een vrij grote knop voor verzending omdat dit de actie is die de meeste gebruikers willen ondernemen. Er zijn echter ook de links "Wachtwoord vergeten / Gebruikersnaam" voor degenen die ze nodig hebben, maar deze zijn kleiner.
Dit idee is een soort visuele hiërarchie omdat het belangrijkste doel van een specifieke webpagina het meest prominente en opvallende element op die pagina is.
Een ander gevolg is een stijging van een bepaalde ontwerpstijl van webapps zelf. Bent u ooit een website tegengekomen die eruit ziet alsof hij bij uw dock hoort (of Start Menu als u Windows gebruikt)? Welnu, er zijn nogal wat voorbeelden die een webapp op een elegante manier over platforms laten lijken door het gebruik van een verscheidenheid aan mooie gradiënten en schaduwen.
Dit is niet alleen evident in web-apps die zijn gericht op desktopgebruik, maar ook op mobiel. Veel kleinere ontwikkelaars kiezen ervoor om mobiele webapps te maken via native apps om kosten te besparen en curven te leren. Deze methode werkt niet alleen met het maken van originele web-apps, maar ook met het thematiseren van populaire web-apps zoals WordPress (zoals deze MobileTuts + -sessie beschrijft).
Laat de gebruiker zien wat hij nodig heeft, niet alles wat hij niet heeft.
Er was een tijd waarin je, als je een actie in een complexe web-app wilt uitvoeren, rond moet scrollen en verschillende niveaus moet doorlopen voordat je zoiets kunt bereiken. Bij contextspecifieke navigatie is dit proces echter een stuk eenvoudiger. De algemene theorie erachter is dat een gebruiker niet altijd toegang tot elke optie nodig heeft en dat alleen degenen die relevant zijn voor zijn / haar huidige situatie moeten worden getoond.
Dit soort scenariospecifieke navigatie wordt meestal bereikt door het gebruik van navigatie op het tweede niveau. De dichtstbijzijnde niet-webgebaseerde analogie die ik kan bedenken is naar Microsoft Office toe en hoe het een lintlay-out gebruikt voor bruikbaarheid. De belangrijkste secties zijn getiteld en met een simpele muisklik verschijnen alle relevante opties.
Een eenvoudige manier om dit samen te vatten is om de gebruiker te laten zien wat hij nodig heeft, niet alles wat hij niet nodig heeft. En dezelfde contextgebaseerde theorie kan ook worden toegepast op andere elementen, zoals pop-up modale kaders die elementen weergeven die alleen nodig zijn als de gebruiker dit wil.
Microsoft Office is een voorbeeld van wijdverbreid gebruik van een contextueel menu. Dit lijkt een beetje een gevolg van de onderwerpen die we eerder hebben besproken, maar deze drie elementen kunnen een grote impact hebben op een webontwerp. Als u schaduwen aan een knop toevoegt, is het bijvoorbeeld pop-over en komt bijna uit als een ontwerp dat niet langer plat is.
Overweeg dan om schaduwen aan een modaal venster toe te voegen en kijk hoe het een gevoel van definitie creëert tussen de originele inhoud en het nieuwe frame. Alleen dat kan een website er interactiever uit laten zien, omdat het meerlagig wordt als een native app. Overweeg vervolgens de effecten als de inhoud de dekking onder verschillende omstandigheden wijzigt om een algehele nieuwe dimensie te creëren voor de inhoud zelf.
Kiezen voor gradiënten kan ook een blijvende invloed hebben op een definitief ontwerp. Net zoals het aantal hellingen toeneemt, springt het ontwerp meer naar voren en lijkt het 3D wanneer het wordt gebruikt in combinatie met innerlijke schaduwen.
Merk op hoe de juiste afbeelding eruit ziet alsof deze twee lagen heeft, terwijl de linker afbeelding dat niet is. Omdat een webapplicatie bedoeld is om te werken als een lokaal werkend softwareprogramma, is een gevoel van alles samenwerken essentieel. En de belangrijkste manier waarop ontwikkelaars dit gevoel kunnen communiceren, is door middel van ontwerp. Ik daag je uit om een webapp te vinden die de volledige gebruikersinterface heeft opgebouwd met pure HTML-voorraadelementen zonder aangepaste styling.
Dat kan je niet? Geen verrassing daar! Het is een feit dat webontwerpen bedoeld zijn om overal een consistente vormgeving te hebben en in web-apps zijn het gebruik van bedieningselementen en invoergebieden belangrijke elementen om te overwegen. Iets eenvoudigs als het toevoegen van een aangepaste achtergrondkleur en het overschrijven van de rand van een verzendknop kan een enorme impact hebben op de eenheid van uw ontwerp.
Let op in het screenshot van GMail hoe alleen de vormgeving van de vervolgkeuzemenu's en knoppen "in het menu passen" bij het algemene ontwerp. Oh ja, ik heb wel een bestelling verzonden bij de Angry Birds-winkel! ; P
Het restylen van voorraadelementen is één ding, maar het maken van nieuwe elementen is nog beter. Neem MyBankTracker als voorbeeld, die een aangepaste schuif gebruiken die nog steeds past in hun algehele witte en blauwe ontwerp.
Terwijl ik onderzoek deed naar een ander alternatief perspectief op het ontwerp van webapps, vond ik een interessant citaat van de voormalige Microsoft Office marketingexpert, Chris Capossela, waar hij iets zei in de trant van: "Toen we vroegen [welke functies gebruikers wilden] Office, negen keer op tien noemen ze iets dat al in het product zit, ze konden het gewoon niet vinden ". Dit soort koppelingen gaat terug naar het hele situatie-geoptimaliseerde navigatie-idee.
Toen we [negen keer op tien] vroegen [welke functies gebruikers wilden] Office, noemden ze iets al in het product; ze konden het gewoon niet vinden.
Het is een feit dat als je veel functies in een kleine ruimte probeert te proppen, elke functie minder belangrijk wordt. En de gebruiker gaat veel langer doorbrengen op zoek naar de gewenste functie. En de gebruiker raakt gefrustreerd. En de gebruiker gaat weg. Dit wil je niet. Om dit in een beter perspectief te plaatsen, probeert u de resolutie van uw beeldscherm zo klein mogelijk te houden en start u de meest UI-intensieve applicatie die u hebt geïnstalleerd. Probeer het en gebruik het en je zult mijn drift daarna opvangen.
Een andere suggestie is om naar uw gebruikers te luisteren, maar niet te veel. Naarmate gebruikers meer en meer functies vragen, kunt u geneigd zijn om hier en daar gewoon nieuwe opties te gebruiken.
Als je weggaat van wat je zou moeten / kunnen gebruiken, laten we maar drie belangrijke dingen over je heen gaan moet niet doen bij het werken aan een app-centrale gebruikersinterface.
Stel je voor dat je iemand op straat ontmoet. U vraagt hen waar de dichtstbijzijnde Starbucks zich bevindt en zij reageren in een andere taal. Je lijkt een woord dat je waarneemt als een verwante op te nemen, maar dat blijkt niet te kloppen en het heeft een volledig kromgetrokken betekenis. Dit klinkt nogal langdradig voor een anologie, maar het punt dat ik probeer te benadrukken is dat je iets zou kunnen waarnemen vanwege je natuurlijke taal, maar de ontwerper zou kunnen streven naar iets compleet anders. Als u bijvoorbeeld koppen genereert die lijken op knoppen, probeert de gebruiker mogelijk erop te klikken en denkt dat deze deel uitmaakt van de web-app en blijft gefrustreerd raken over het gebrek aan functie en verwarrende ervaring.
Mijn eerste bericht hier bij WebDesignTuts + besprak formuliervalidatie en het belang ervan voor gebruikers. Als gebruiker zou ik graag willen weten wat ik fout doe als ik je app niet kan bewerken en het is altijd aan te raden om vanaf het begin ruimte in te bouwen voor feedback.
Ontwerpinconsistentie is een frustrerende ervaring, omdat ze, net zoals een gebruiker gewend is aan een manier om dingen te doen, geconfronteerd worden met een andere. Een heel eenvoudig voorbeeld is Expedia, waarbij de vertrekkende en terugkerende kalender van maand wisselt naarmate u een datum selecteert.
Hier is een korte lijst met zes websites en webtoepassingen die duidelijk laten zien wat de ontwerpprincipes zijn die we in dit artikel hebben besproken, van native app-ontwerp tot de belangrijkste nadruk.
Om dit artikel samen te vatten, is er een duidelijke invloed op het web van traditionele, native applicaties. Elke ontwerpbeslissing met webapps komt echter neer op bruikbaarheid. Applicaties moeten eenvoudig zijn, ze moeten de nadruk leggen op de belangrijkste functies, zodat een gebruiker gemakkelijk door de site kan gaan.
.
Accentsconagua