Button link

De button die ik nog vergeten was, is die van de link. Deze is nogal belangrijk, want hij komt vaak terug. Het eerste ontwerp is afgeleid van de de button voor links op te roepen in het magazine Project. Ik vond deze redelijk duidelijk en praktisch. Zonder de handleiding te lezen is het waarschijnlijk niet meteen duidelijk waarvoor de button staat. Hij wordt wel consequent toegepast, zodat wanneer je er 1 maal hebt op geklikt je weet wat hij zal doen op andere pagina's. Het lijkt me ook belangrijk dat je niet slechts in 1 klik meteen uit de applicatie gaat, naar het web. Want wanneer je per ongeluk de button zou indrukken is dit vervelend.

Vertrekken vanuit de standaardbutton zoals bij het tweede ontwerp is niet optimaal, want dan weet je niet meer goed waar deze button voor staat.

De button met de pijl verwijst naar het uit de applicatie gaan
De laatste lijkt me het duidelijkste en past het beste bij de andere buttons

Zoektocht naar geschikt lettertype

1,5 jaar geleden heb ik een onderzoek gedaan naar leesbaarheid op papier en op het beeldscherm. Daarin ben ik op zoek gegaan naar lettertypes die optimaal leesbaar zijn op één van de 2 dragers en heb gezocht naar verklaringen. Wanneer we een beetje naïef zijn kunnen we zeggen dat een lettertype met schreven goed leesbaar is op papier en één zonder goed leesbaar op een beeldscherm. Dit komt omdat de schreven bij een gedrukte tekst zorgen voor verbindingen tussen de letters, waardoor het gemakkelijk en vlotter leest. Op een beeldscherm worden deze schreven wat wazig door de pixels en dus minder goed leesbaar. Maar er zijn natuurlijk nog kenmerken die meespelen, bv kleur en contrast in dikte van de onderdelen van 1 letter.

Voor een beeldscherm kunnen we spreken van een optimaal leesbaar lettertype wanneer deze: geen schreven heeft, zwarte tekst op witte achtergrond, zo weinig mogelijk contrast (letter is overal even dik) en x-hoogte is voldoende groot

De digitale elle magazine heeft op dit moment als lettertype baskerville. Baskerville: schreven, veel contrast, kleine x-hoogt. Dus zeker geen goed lettertype voor op een beeldscherm.

Ik kwam op onderstaande site uit waarop je gemakkelijk de leesbaarheid van een lettertype op een beeldscherm kan controleren. Waarschijnlijk is het screenshot niet heel duidelijk, maar desondanks zien we toch dat het tweede lettertype, baskerville het minst goed leesbaar is. Na heel wat lettertypes geprobeerd te hebben lijkt Verdana (het eerste) me de beste keuze.



Ik ga Verdana dan ook toepassen in de broodtekst. Maar niet voor titels, want baskerville hoort bij de stijl van elle magazine en we mogen de eigenheid van het magazine niet verliezen. De titels zijn voldoende groot om goed leesbaar te zijn.

Anderen:
Futura Bold


sterk gelijkend op: leksandar Aleksandrov Typograph Pro


sterk gelijkend op: Baskerville book

Zoektocht naar vormgeving navigatiebalk

Werken met GUI


De balken mogen wel een 3d-effect hebben, want ze werken als een pop-over en behoren dus niet tot de werkelijke magazine
Daarmee wil ik niet zeggen dat de vormgeving totaal anders zijn dan die van de magazine
Deze elementen zijn universeel herkenbaar, omdat ze bij een heel aantal magazines gebruikt worden


Maar misschien moeten we niet met deze elementen te werken om een duidelijk affordance te bekomen, daarom maak ik een afgeleide van mijn buttons om ook te gebruiken in het menu

We zien dat de eerste balk waarschijnlijk te moeilijk leesbaar zal zijn. Het zou overzichtelijker zijn als we optie 2 of 3 gebruiken. We moeten ons vooral het volgende afvragen: Is het nog duidelijk dat het buttons zijn zonder de cirkel er rond (de cirkel die ook gebruikt wordt bij de andere buttons) ? Persoonlijk lijkt het me zeker van wel, omdat ze staan in een balk die opgeroepen kan worden.

Er moet ook opgelet worden dat de buttons niet te dicht op elkaar staan
The Nielsen Company : Research has shown that the best target size for widgets is 1cm x 1cm for touch devices



Het rode vierkant = 1cm
De buttons zijn dus gemiddeld maar 0,5 cm, maar ze bevinden zich wel op de balk, dus moet men ze niet gaan zoeken. Het drukbaar gebied zal wel 1 cm zijn





Nu ben ik bezig met het ontwerpen van de wireframe voor de inhoudstabel:

The Nielsen Company: NAVIGATION PANEL ON THE LEFT
One of the most successful content-area navigation features on the iPad is the left-side navigation panel. The panel is usually a popover in portrait mode and a stable panel in landscape.

Zoektocht naar vormgeving buttons

Waarom gebruik deze stijl van vormgeven en niet bv buttons die een 3D-gevoel geven, zoals deze:

Deze button is zeker gebruiksvriendelijk, want het ziet er uit alsof hij is opgeheven, waardoor het lijkt of hij indrukbaar is. Maar de stijl past niet in een stijlvol modemagazine. De button moet simpel vormgegeven worden

zie onderzoek van the Nielsen Company:
there are often no perceived affordances for how various screen elements respond when touched. The prevailing aesthetic is very much that of flat images that fill the screen as if they were etched. There’s no lighting model or pseudo-dimensionality to indicate raised or lowered visual elements that call out to be activated.
In contrast, long-standing GUI design guidelines for desktop user designs dictate that buttons look raised (and thus pressable)


Ik krijg graag feedback, dus twijfel zeker niet om deze te geven !

✖●✖●

Big Think

Nobody can predict specific products, like the iPad, it is uncertainty itself that keeps us innovating. Aldus Big Think

Buttons, navigatiehints en navigatiebalken schetsen

Navigatiesymbolen

Laten we even kijken naar de pijlen die de navigatierichting aanduiden in de magazine die geanalyseerd zijn d.m.v. de createrialijst:


We merken dat het altijd duidelijk is in welke richting te navigeren wanneer men een pijl gebruikt, de vormgeving maakt niet uit. We merken we dat bij Project (eerste editie) men gebruik maakt van een plus. Dit zie je in de afbeelding hieronder. Dit wil zeggen dat je naar onder moet swipen, maar dit is voor velen niet meteen duidelijk. Een pijl is dus veel gebruiksvriendelijker


We kijken nu naar enkele buttons:

Op plus tappen om extra content op te roepen. Het lijkt me interessanter dat de plus verandert in een kruis, zodat het duidelijk is dat je de content ook weer kan wegtappen. Zoals hieronder:


Duidelijk dat je moet tappen op deze buttons:



Voor het oproepen van een link:



Het is natuurlijk duidelijker wanneer je met een kleur aanduid bij welk onderdeel je zit



Dit zijn eigenlijk geen buttons maar het lijkt misschien of ze het wel zijn:




Dit is een button, maar men zou denken van niet:



persoonlijk heb ik een voorkeur naar het rondje met de plus erin en misschien nog sterker naar een dubbel rondje met een plus zoals:

De dubbele ring doet me denken aan wanneer je met je vinger op een wateroppervlak duwt er waterringen verschijnen. Hierdoor link ik het duwen op het watervlak met het duwen op de iPad. Dit gevoel is waarschijnlijk puur persoonlijk.
Ook doet het me denken aan een schietschijf, dus wanneer je daar op klikt zal je het doel bereiken. Dit is allemaal waarschijnlijk wat out of the blue, maar mijn koppelingen zijn vaak ver gezocht :)



Anderen:




Duidelijk menu:


Zeer praktische inhoudstabel. Zowel gebruik van foto, korte titel en korte uitleg:


Deze handleiding bevat te veel tekst en is daardoor minder visueel duidelijk. Mensen hechten vaak weinig belang aan de handleiding en denken dat het zonder ook wel zal lukken. Ze zullen hier dan ook zeer snel door navigeren en gemiddeld slecht enkele seconden naar kijken:

Duidelijke handleiding, visueel sterk en clean:

Lijnen trekken naar de werkelijke buttons is zeer duidelijk, zo is er zeer weinig verwarring mogelijk