Share
Ontwerpers versus ontwikkelaars - het is een argument zo oud als computers. De waarheid is echter dat geen van beide zonder de ander kan leven. Een briljante UI-ontwerp is zo waardeloos zonder functionaliteit als het beste stuk code met een lelijke, onbruikbare frontend. In deze eerste post over UI Basics voor ontwikkelaars, ga ik proberen een aantal eenvoudige basisregels op te stellen die ontwikkelaars kunnen volgen om ervoor te zorgen dat hun apps, sjablonen en prototypen net zo mooi zijn als de code zelf - en bruikbaar zijn om op te starten.
Denk: de eerste indruk is de laatste indruk.
Uitlijning verwijst naar de positie of oriëntatie van een element ten opzichte van een ander element of naar zichzelf. Wanneer we verwijzen naar twee elementen die op elkaar zijn uitgelijnd, verwijst uitlijning meestal naar welke zijde van beide elementen in lijn is. In de context van tekst verwijst uitlijning naar de kant waaraan tekst in een rechte lijn is verankerd.
In de bovenstaande afbeelding toont het tweede voorbeeld van een eenvoudig formulierontwerp labels die rechts uitgelijnd zijn met invoervelden die links uitgelijnd zijn. Dit zorgt ervoor dat de associatie tussen elk label en zijn invoerveld helder is en de gebruiker niet in de war raakt als sommige labels te klein zijn, terwijl andere te lang zijn.
Denk: zorg ervoor dat invoervelden niet te ver weg zijn van het langste etiket. Als de breedtevariatie klein is, probeert u rechts uitgelijnde labels en links uitgelijnde invoervelden.
Voor tekst is het ideaal om linkse uitlijning te gebruiken wanneer u naar het scherm wilt. Aangezien de meeste weergavemethoden van het schermtype niet in staat zijn om de juiste ruimte te verdelen bij het rechtvaardig maken van tekst aan beide zijden, blijft de tekst goed leesbaar en goed georganiseerd. U kunt natuurlijk de middelste en juiste uitlijning gebruiken waar het ontwerp dit vereist, maar die zijn meestal gereserveerd voor speciale gevallen en kleinere stukjes tekst.
Het primaire doel van elke gebruikersinterface is om de gebruikersinterface met de toepassing te laten communiceren. Dit, geloof het of niet, zal niet mogelijk zijn, tenzij je de gebruiker vertelt wat hij moet doen en in welke volgorde. Omdat je er niet achter elke gebruiker zal staan om hen hiermee te helpen, moet de interface alle signalen bieden. Hier zijn enkele vragen te stellen bij het evalueren of de beoogde workflow geschikt is:
Laten we het voorbeeld nemen van een selectie van een zoekcategorie op iStockPhoto. In dit geval kan ik alles doorzoeken of een specifieke categorie selecteren om mijn zoekopdrachten te beperken tot dat type informatie. Aangezien de primaire handeling erin bestaat een zoekterm in te voeren en op Zoeken te drukken, moeten die vrij duidelijk zijn. Een mogelijke stap hiertussen is het selecteren van een categorie, die een vervolgkeuzelijst kan zijn tussen (u raadt het al rechts) het zoekveld en de knop Zoeken.
Een ander voorbeeld is het dialoogvenster voor het invoeren van inkomsten / uitgaven in de cashbase-app. De velden zijn gerangschikt volgens de typische workflow die iemand zal gebruiken om dergelijke informatie te loggen: voer het bedrag in (wat het belangrijkste element is), selecteer een categorie, voeg indien nodig een notitie toe en klik op Toevoegen. Secundaire informatie die veel minder vaak zal worden gebruikt - zoals de datum die vandaag standaard is en de optie om te herhalen of annuleren - zijn beschikbaar, maar veel subtieler.
Gerelateerde elementen in een interface moeten worden gegroepeerd. Dit klinkt misschien als gezond verstand wanneer ik het noem, maar het wordt niet altijd goed begrepen. De reden dat alle paginanavigatielinks op de meeste websites zijn ingedeeld in één horizontale balk, is zodat de gebruiker de relatie in één oogopslag kan identificeren en de keuze kan maken om zonder verwarring met hen te communiceren..
Laten we dit voorbeeld bekijken vanuit Gmail - een app die regelmatig wordt gebruikt. Dit is de werkbalk die bovenaan verschijnt wanneer u een e-mail opent. Hoewel al die knoppen enige actie uitvoeren op het open bericht, worden ze verder gegroepeerd op basis van wat ze doen - acties die men zou gebruiken om zich te ontdoen van het bericht (archief, spam, verwijderen), om het belang van het bericht te veranderen (wanneer Prioriteitsinbox gebruiken), labelgerelateerde acties en ten slotte een vervolgkeuzemenu met secundaire opties.
Een ander voorbeeld van goed gebruik van nabijheid is de optiesbalk in Zootool. De werkbalk onderaan is verdeeld in drie sets, die elk overeenkomen met de drie vensters in de app: de lijstpakketten aan de linkerkant, het e-mailvenster in het midden met al uw bladwijzers en het detailvenster aan de rechterkant.
Niet alles in een gebruikersinterface, of welke lay-out dan ook, heeft hetzelfde belang als al het andere. Hiërarchie is de rangschikking van elementen op een manier die aangeeft wat hoger is in volgorde, wat daarna komt, enzovoort.
Laten we dit voorbeeld hier bekijken en proberen vast te stellen wat de volgorde van voorrang is. Aangezien alles - titels, labels en alineatekst - er hetzelfde uitziet, moet je alles doorlezen om zin te krijgen. Als dezelfde interface net een beetje zoals hieronder is aangepast, is de algehele invloed op de leesbaarheid en daarmee de bruikbaarheid van de interface enorm.
Als algemene regel geldt dat de paginakop het grootst en het meest zichtbaar op het scherm moet zijn. Dit wordt gevolgd door sectietitels, ondertitels en vervolgens kleinere labels. Alinea-tekst kan meer of minder prominent zijn, afhankelijk van het doel. Het is ook niet beperkt tot tekst. Primaire actieknoppen kunnen worden onderscheiden van secundaire acties door ze helderder, groter of exclusiever te maken. Invoervelden voor verplichte ingangen kunnen duidelijker worden gemaakt dan de andere. Ik zou door kunnen gaan, maar ik denk dat je het idee begrijpt.
Een andere zeer belangrijke overweging bij het ontwerpen van interfaces is te zorgen voor een duidelijke differentiatie tussen elementen. Natuurlijk wilt u dat de tekst leesbaar is op de achtergrond, maar het contrast gaat verder dan alleen het gebruik van lichte tekst op een donkere achtergrond of omgekeerd. Koppen en paragraaftekst moeten duidelijk te onderscheiden zijn. Panelen en navigatiebalken moeten van elkaar worden gescheiden, zodat de gebruiker weet wat wat is. De lijst gaat verder.
Het contrast kan worden vastgesteld met behulp van een of meer van de volgende kenmerken:
Dit zou duidelijk moeten zijn, maar het is verbazingwekkend hoe vaak mensen op dit punt wegglippen. Als je achtergrond licht is, wil je natuurlijk dat de tekst donker is om de leesbaarheid te garanderen. Hoewel in theorie complementaire kleuren goed zouden moeten samenwerken, is het niet altijd zo gemakkelijk. Probeer heldergroene tekst op een rode achtergrond te plaatsen en je weet wat ik bedoel.
De mogelijkheden hier zijn onbeperkt, dus mijn eerste aanbeveling aan iedereen die op zoek is naar kleuren, is om een populair kleurenpalet op te halen van sites als Adobe Kuler of ColourLovers. Ze worden bijgedragen, geëvalueerd en gestemd door gepassioneerde gebruikers die meestal hun weg weten in kleur. Alle basisprincipes van kleurafstemming en contrast worden meestal geregeld, dus het is gewoon een kwestie van beslissen welk kleurenschema werkt in de context van uw app.
Toch een waarschuwing: wees voorzichtig van het overboord gaan van kleuren. U wilt niet dat zij het nut en de bruikbaarheid van uw app overschaduwen.
Een andere goede manier om onderscheid te maken tussen elementen - op basis van hiërarchie, categorisering of visuele stroom - is om verschillende grootten te gebruiken. Dit geldt zowel voor tekst als voor afbeeldingen, achtergronden en statische of interactieve elementen. Misschien wilt u bijvoorbeeld meer nadruk leggen op de knop met de primaire actie en de secundaire knoppen relatief minder toegankelijk houden. Of optionele aanwijzingen kunnen kleiner en lichter zijn dan de primaire labels in een formulier.
De TeuxDeux-app doet fantastisch werk door kleur te gebruiken om onderscheid te maken tussen verleden, heden en toekomst. Omdat de lay-out is afgestemd op een werkweek, worden verschillende tekstmaten gebruikt om ervoor te zorgen dat namen van dagen gemakkelijk te identificeren zijn, terwijl de datums relatief subtieler zijn.
Aangezien het belangrijkste doel van elke gebruikersinterface is om gebruikers in staat te stellen interactie te hebben met de app, is het absoluut noodzakelijk dat leerlingen intuïtief weten wat ze moeten doen. Als makers van de interface is het heel gemakkelijk om te vergeten dat je er niet voor elke gebruiker bent om ze te vertellen wat ze moeten doen. Gebruikers hebben evenmin het geduld om handleidingen en snelstartgidsen te lezen voordat ze een app gebruiken. De interface is nodig om ruimschoots duidelijk te maken welke delen ervan klikbaar, tastbaar, dragbaar - kortweg, interactief zijn.
Iedereen weet hoe je een elektrische schakelaar moet indrukken, toch? Het ding dat het voor iedereen duidelijk maakt dat een schakelaar op een bepaald punt moet worden ingedrukt om van toestand te veranderen, wordt genoemd affordance. Op het vlakke oppervlak van een scherm - desktop, mobiel of anderszins - kunnen verschillende technieken worden gebruikt om gebruikers in staat te stellen intuïtief op een knop te klikken of in een invoerveld te typen. Bij het maken van teksthyperlinks is het toevoegen van een onderstrepingsteken voor de link de meest gebruikte standaard, hoewel er vele andere creatieve manieren zijn om dat te doen.
Hier zijn enkele voorbeelden:
Hoe gaat het met het switch-voorbeeld, hoe weet u of het vegen van de schakelaar heeft gedaan wat het moest doen? Het lampje gaat aan of uit, of in sommige gevallen maakt een lampje in de schakelaar duidelijk of de schakelaar aan of uit staat.
In een toepassing kan dergelijke feedback heel duidelijk zijn in gevallen waarin een knop naar een andere pagina navigeert of een pop-up opent, maar hoe zit het met situaties waarbij het alleen maar om wat gegevens op de achtergrond verwerkt - zoals bij het opslaan van wijzigingen in de gebruikersinstellingen? Een soort feedbackmechanisme is van cruciaal belang om gebruikers te laten weten dat hun actie succesvol was. Dit kan net zo eenvoudig zijn als een bericht 'uw instellingen zijn opgeslagen', een korte melding bovenaan de pagina of een snelle markering rond het gebied dat is bijgewerkt.
Wanneer u een nieuwe taak toevoegt in Remember the Milk, kan deze worden weergegeven in de lijst op dezelfde pagina of eenvoudig worden toegevoegd aan een andere lijst op de achtergrond (als de taak bijvoorbeeld is toegewezen aan een andere categorie). De feedback voor de actie wordt daarom op twee niveaus verstrekt:
De tekst in uw app - van het logo tot de titels, labels en kopie - is uw primaire communicatiemiddel met de gebruikers. Aangezien uw gebruikers toegang hebben tot informatie over de app of via de app, kan de manier waarop u het type instelt het verschil betekenen tussen succes en mislukking. Natuurlijk moeten titels groter zijn dan hoofdtekst en moet de kleine lettertjes goed zijn; maar veel andere beslissingen beïnvloeden ook hoe gebruikers informatie gebruiken.
Stap één: definieer uw lettertypen. Het verbaast me hoeveel ontwikkelaars eenvoudig nooit de moeite nemen om het lettertype waarin hun tekst wordt gegenereerd, te veranderen. Standaardlettertypen veranderen van OS naar OS en van browser naar browser, wat inhoudt dat tenzij je expliciet aangeeft welk lettertype je wilt gebruiken, je tekst naar zien er anders uit in elke OS- en browsercombinatie. Bovendien is Times New Roman - dat veel browsers gebruiken als het standaardlettertype - gewoon geen goed lettertype voor lezen op het scherm. Mijn eerste aanbeveling is vaak om een sans-serif-lettertype te gebruiken, hoewel Georgia of het nieuwe Cambria-lettertype in Windows 7 er ook goed uitzien.
Als u besluit lettertypen te gebruiken die niet de veilige, universeel beschikbare zijn, zoals Arial / Helvetica, Georgia, Tahoma enz., Moet u ervoor zorgen dat ze op alle platforms op dezelfde manier kunnen worden weergegeven. Als Flash uw voorkeurskeuze is, sluit u deze waar nodig in. Gebruik voor HTML / JS-gebaseerde apps @ font-face in CSS of een van de weblettertypediensten zoals Typekit of Google WebFonts. Houd er echter rekening mee dat deze technieken gepaard gaan met extra regels voor de ingesloten lettertypen. Als snelheid en reactievermogen voor u van groot belang zijn, is het de beste keuze om bij de basislettertypen te blijven.
ontkenning: Ja, ik weet dat Arial en Helvetica niet precies hetzelfde zijn, maar ze zijn voor de meeste gebruikers vergelijkbaar genoeg om het verschil niet op te merken.
De hoeveelheid ruimte tussen twee regels tekst is de leidende. U wilt dat de oplijning van uw alineatekst (regelhoogte in CSS spreekt) ten minste 140% van de tekengrootte is om ervoor te zorgen dat deze gemakkelijk leesbaar is. Enig minder en je tekst zal veel moeilijker te lezen zijn en - belangrijker - om door te scannen.
Als u van plan bent om uw app in beide talen te vertalen - en dat zou u echt moeten doen - is het het beste om de interface in een vroeg stadium met verschillende scripts te testen. Op zijn minst kan de hoeveelheid ruimte die een bepaald bericht nodig heeft, drastisch variëren in verschillende scripts. De Oost-Aziatische scripts gebruiken gemiddeld minder woorden, maar hebben een grotere lettergrootte nodig, Indiase (Indic) scripts moeten ook iets groter zijn om leesbaar te zijn en scripts in het Midden-Oosten (zoals Arabisch) gaan van rechts naar links in plaats van de gebruikelijke links -to-rechts.
Dat is het ongeveer voor nu. Ik hoop dat deze tips voldoende basisinformatie bevatten zodat je ze meteen kunt toepassen in je projecten. Zoals met de meeste ontwerpgerelateerde disciplines, zijn er geen harde en snelle regels om te volgen, en iedereen heeft zijn eigen kijk op hoe de dingen zouden moeten werken. Dus als u het niet eens bent met een van mijn bovenstaande suggesties - of zelfs als u het met hen eens bent, maar een ander perspectief hebt - laten we daarover in de commentaren horen.
Vervolgens nemen we al deze kennis op en proberen we deze op een echte interface toe te passen. Blijf kijken!
Accentsconagua