10 Remedial Design-aanwijzers voor ontwikkelaars

Hier is een situatie die u misschien bekend voorkomt: u bent een ontwikkelaar en u bouwt een prototype om iets te demonstreren. Het werkt precies zoals u het bedoelt, maar het uiterlijk van afschuw op de gezichten van uw gebruikers vertelt u dat er iets mis is: uw demo ziet eruit als onzin.

Laten we enkele eenvoudige richtlijnen en tips bekijken om uw demo's er zo goed mogelijk uit te laten zien.

Kom tot rust

Je hebt misschien het volgende gehoord: 

"Goed ontwerp, als het goed is gedaan, wordt onzichtbaar. Alleen als het slecht gedaan is, merken we het op. "- Jared Spool

Dit is relevant voor alle ontwerpers, maar het is vooral relevant voor u als ontwikkelaar. U bouwt een demo; iets dat uitsluitend bedoeld is om iets te demonstreren. De gebruikers moeten zich verdiepen in elke taak die voor hen ligt, niet reageren op het "ontwerp".

Aanwijzer # 1: Door te proberen een stilistische uitspraak te doen, bestaat er een grote kans dat je echt verder weggaat van het leveren van een goede demo. Hou het simpel. Blijf bij het werken.

Als iets 'er niet goed uitziet', verwijder dan alle visuele details die u mogelijk hebt toegevoegd (zoals vakschaduwen, randen, effecten) en ga terug naar de tekentafel.

Nu hebben we dat betuttelende waarschuwingsbericht uit de weg, laten we ons concentreren op enkele meer praktische aanwijzingen!

Vermijd een rommelig palet

Niets is directer beledigend voor de ogen dan slechte kleurkeuzes. In feite moeten kleurbeslissingen goed worden behandeld in het UI-ontwerpproces, maar het is altijd verleidelijk om vette kleurkeuzes vroeg te maken.

Nee, duidelijk niet wat we zoeken

Als je een gebruikersinterface bestickerde, zou je zo eenvoudig mogelijk beginnen; met rudimentaire vormen, lijnen en zwart-wit. Nadat de lay-out en de relaties waren afgehandeld, zou je meer details toevoegen en naar hogere getrouwheid gaan totdat je uiteindelijk begint doelbewust kleur verkennen. Dus dan, enkele tips:

Wijzer # 2: Overweeg om monochroom te gaan op je eigen demo's. Blijf bij grijstinten (vijftig?) Tot je klaar bent om kleur te gebruiken om dingen te verduidelijken.

Zelfs als we dat doen niets anders is dit een verbetering

Wijzer # 3: Als vuistregel, vermijd volledig verzadigde kleuren (dwz: kleuren op volle sterkte, zonder toegevoegde witte tint). Vooral wanneer ze op een verlicht scherm worden bekeken, kunnen ze ongemakkelijk zijn om naar te kijken wanneer ze met elkaar worden gecombineerd.

Wijzer # 4: Hetzelfde geldt voor zwart en wit. Door de extremen te vermijden, vast te houden aan off-black en off-white, heb je minder kans om je gebruikers vermoeide ogen te geven.

Ga nog verder en voeg een vleugje kleur toe aan je zwart en grijs. Zoals Ian Storm Taylor al in 2012 zei:

"Schaduwen zijn niet zwart"

Ian's lessen van de kunstacademie komen overeen met die van mijzelf - ik herinner me dat mijn leraar me uitdaagde om een ​​zwarte stip te vinden in Georges Seurat's A Sunday Afternoon op het eiland La Grande Jatte.

Spoiler: u zult er geen vinden

Wijzer # 5: Wanneer u kleuren aan uw monochrome ontwerp toevoegt, doe dit dan een voor een. Elke kleur die u toevoegt, is een uitnodiging voor gebruikersafleiding. We spraken kort over het vermijden van hoge verzadiging, maar er is niets om te zeggen dat je geen reeks verzadigingen van één kleur kunt gebruiken. Dat geeft je de verscheidenheid en diepte die je nodig hebt, zonder risico's.


Compliceer typografie niet te ingewikkeld

Als we het over demo's en prototypen hebben, hoeven we echt niet verder te gaan dan het gebruik van systeemlettertypen (zie aanwijzer # 1). Overweeg echter het volgende:

Wijzer # 6: Je bent in veilige handen met sans-serif ("zonder" serif). Serif-letterbeelden zijn die met de details waar slagen eindigen (een vakjargon daar voor u).

Serieven kunnen handig zijn om persoonlijkheid aan een ontwerp toe te voegen, en ze kunnen vaak een stuk tekst gemakkelijker leesbaar maken. Maar ze worden niet traditioneel gebruikt in UI-ontwerp, met name in kleinere maten, omdat ze vaak variërende lijngewichten weergeven.

Notitie: naarmate de schermresoluties toenemen, verbetert de duidelijkheid en dit argument weegt minder zwaar.

Roboto & Noto

Google maakt gebruik van de 'humanistische' Droid Sans in hun Android-interfaces en meer recentelijk in Roboto en Noto. Apple gebruikt San Francisco voor hun reeks besturingssystemen, en daarvoor Neue Helvetica. Firefox OS gebruikt Fira Sans. Let op het algemene thema hier? Alle schreefloos.

Wijzer # 7: Vermijd dubbelzinnigheid. Tekencombinaties zoals O0, aeo, 8B, Il1, 5S, 2Z, 6b en 9g zijn soms moeilijk te onderscheiden, afhankelijk van het gekozen type. Test ze; als je moeite hebt ze uit elkaar te houden, is het verstandig om een ​​ander lettertype te kiezen.

Fira Sans (van Firefox OS) is redelijk duidelijk

Ruimte om te ademen

Whitespace (functionele ruimte) dient de visuele ontwerper op vele manieren. Het helpt een gevoel van balans te creëren, vestigt de aandacht op noodzakelijke aspecten van het ontwerp, vermindert de cognitieve belasting voor de gebruiker (ik zou kunnen doorgaan). Als uw gebruikersinterface krap is, zullen gebruikers zich snel ongemakkelijk voelen en hun vermogen om taken effectief te verwerken verminderen.

Bij veel informatie is het verleidelijk om zoveel mogelijk in te persen, maar welke van deze twee voorbeelden vind je makkelijker aan het oog?

Ouch - die titel wordt tegen de bovenkant van de pagina platgedruktRuimte toegevoegd voor de cellen van de tafel en rondom het geheel

Wijzer # 8: Als het om de ademruimte gaat, is "meer" bijna altijd beter. Voeg opvulling toe, voeg marges toe, verhoog lijnhoogten, spreid alles uit.

Wijzer # 9: Maak uw tussenruimte consistent. Gebruik een standaardeenheid als uw basis, door ruimte toe te voegen in stappen van (bijvoorbeeld) 10px. Consistentie is de sleutel tot het creëren van ritme en harmonie.

Sans-serif type, monochroom met een accentkleur, veel ruimte, consistente spatiëring

Maak je leven gemakkelijker

Er is geen schaamte in; laat frameworks zoals Bootstrap en Foundation het werk voor je doen. Ze worden vaak bekritiseerd omdat productiesites er generiek en fantasieloos uitzien, maar voor prototypes zijn ze absoluut perfect, rechtstreeks uit de doos. 

Alle beslissingen die we tot nu toe hebben besproken, zijn al voor u gemaakt: typografie, kleuren, spatiëring, consistentie en voor rommelige details zoals formulieren die u niet fout kunt gaan.

Wijzer # 10: Ga op de schouders van anderen staan. Grijp bestaande Bootstrap-sjablonen, Foundation-sjablonen, of Material Design Lite, of Skeleton, of Pure CSS, of UIKit, of welke van de miljoen CSS-frameworks die u maar wilt! Wees niet bang om je eigen stijlen bovenop toe te voegen, rekening houdend met alle punten die we tot nu toe hebben besproken.

Van de bouwstenen van ZURB

Deze raamwerken zijn allemaal zeer uitgebreid. Zorg ervoor dat je alle stukjes gebruikt die je nodig hebt; je zult waarschijnlijk in de problemen komen als je slechts een paar elementen selecteert.

Conclusie

Dit was niet bedoeld als een fundamenteel artikel, maar is bedoeld om u te helpen eventuele problemen met uw prototypeontwerpen glad te strijken. Als je een ontwikkelaar bent - misschien door een cursus op te nemen of een product voor te stellen aan klanten of je team - en je wilt echt dat je demo's hun werk doen, dan zouden deze aanwijzingen je op het juiste spoor moeten brengen. Laat het me weten in de comments als je specifieke vragen hebt. Succes!