U hebt een vormsysteem nodig

Hoe vorm te gebruiken om uw merk te verbeteren, aandacht te trekken en interacties te ondersteunen

Wanneer ontwerpers merk en hiërarchie in UI uitdrukken, zullen ze zich vaak wenden tot bekende systemen van kleur, typografie en afbeeldingen. Maar er is een ander, over het hoofd gezien element in de gereedschapskist van de ontwerper: vorm.

Van knoppen tot kaarten, tekstvelden, menu's en zwevende actieknoppen (FAB's), vorm is een onmiskenbaar aspect van elke interface. En nu is het nieuwste gedeelte van de richtlijnen voor materiaalontwerp volledig gewijd aan best practices voor het gebruik van vorm in de gebruikersinterface. Wat volgt is een beetje inspiratie voor hoe u vorm kunt gebruiken om uw merk te verbeteren, aandacht te trekken en interacties te ondersteunen.

Vorm versterkt uw merk

Een van de meer holistische manieren om vorm in de gebruikersinterface te benaderen, is om na te denken over het vermogen om merk uit te drukken wanneer het doordacht in een app wordt toegepast. Een merk met een meer organische of vriendelijke uitstraling kan kiezen voor afgeronde vormen, terwijl een merk met een geometrische stijl of een verlangen om precisie uit te drukken, kan kiezen voor een meer hoekige vorm. De Shrine-app gebruikt bijvoorbeeld scherpe sneden in de hele gebruikersinterface om de hoekige vorm van het logo weer te geven.

Vorm stuurt hiërarchie

Sterke vormverschillen kunnen nadrukkelijk worden gebruikt om de aandacht te richten. Als een gebruikersinterface bijvoorbeeld meestal afgeronde vormen heeft, kan de introductie van een scherpe, ruitvormige knop de aandacht op dat onderdeel vestigen. De klassieke Material Design UI van een ronde FAB voor rechthoekige kaarten is een ander voorbeeld van hoe vorm kan worden gebruikt voor nadruk. Een meer harmonieus of subtiel gebruik van vorm binnen de visuele hiërarchie kan relaties tussen elementen communiceren, zoals kaarten met dezelfde vorm die als gelijken worden weergegeven, of vorm die helpt om afzonderlijke oppervlakken te onderscheiden - een benadering die wordt gebruikt door de achtergrondcomponent.

Vorm wijst op interactie

Vorm kan ook tactischer worden gebruikt om specifieke toestanden of mogelijkheden voor interactie aan te geven. Het wijzigen van de hoek van een kaart om een ​​selectiestatus aan te geven, kan een aanvulling zijn op technieken zoals het gebruik van pictogrammen, het wijzigen van de dekking van de kaartinhoud of het wijzigen van de kaartgrootte. Veranderingen in vorm kunnen ook subtiel wijzen op de mogelijkheid van interactie met een oppervlak. Afgeronde hoeken kunnen bijvoorbeeld betekenen dat een onderste vel omhoog kan worden getrokken, terwijl vierkante hoeken kunnen betekenen dat alle inhoud momenteel wordt weergegeven. Het gebruik van dit type beeldtaal om interactiemogelijkheden aan te geven is echter niet goed ingeburgerd of gesystematiseerd, dus vermijd alleen vertrouwen op vorm om betekenis te communiceren.

Begin met het bouwen van uw vormsysteem

  1. Overweeg de kenmerken van uw merk. Welke kernvorm belichaamt de sfeer en persoonlijkheid van uw merk? Gebruik dat uitgangspunt om een ​​complementaire reeks vormen te ontwikkelen. Is je kernvorm afgerond? Probeer kaarten met een ronde hoek te combineren met een opvallende, pilvormige verlengde FAB. Meer in hoeken? Overweeg gesneden hoeken op knoppen en onderste vellen.
  2. Denk na over de hiërarchie van uw gebruikersinterface en hoe vorm kan worden ingezet om de aandacht te vestigen op de juiste delen van het scherm.
  3. Gebruik vorm consequent en doelbewust in uw app, zodat uw vormkeuzes betekenis ontwikkelen voor uw gebruikers. Inconsistent gebruik van vorm kan verwarrend zijn en overmatig gebruik kan uw merkexpressie verwateren. Zorg er ook voor dat de puur decoratieve vorm niet functioneel of interactief lijkt en dat de vorm die wordt gebruikt om betekenis te communiceren duidelijk en ondubbelzinnig is.
  4. Test ook uw vormverhaal met gebruikers. Vorm kan op zichzelf dubbelzinnig zijn en kan het beste worden gecombineerd met een pictogram of tekst om een ​​expliciete betekenis te communiceren. Uiteindelijk is gebruikerstesten de beste manier om te bepalen of uw beoogde gebruik van vorm werkt en wordt begrepen op de manier die u van plan bent.

Help ons de toekomst te ontwerpen

In tegenstelling tot bestaande systemen zoals type en kleur, heeft vorm geen goed gedefinieerde regels voor toepassing in de gebruikersinterface. Maak van deze gelegenheid gebruik om alleen met vorm of in combinatie met meer gevestigde UI-patronen te experimenteren om de meest effectieve manier te vinden om met uw gebruikers te communiceren.

Deel uw vormexperimenten met ons @materialdesign.