UI frameworks - R. van Amerongen

36
UI / UX Robbrecht van Amerongen

Transcript of UI frameworks - R. van Amerongen

UI / UX Robbrecht van Amerongen

3

Robbrecht van Amerongen

@robbrecht

Linkedin.com/in/robbrecht

flipboard.com/@robbrecht

Telefoon aan! Geluid uit!

Gebruik @amisnl

@robbrecht

Agenda

17.00 Overview UX Robbrecht van Amerongen

18.00 Diner

18.45 Frameworks en best practices Niels Mansveld

19.15 UI proces bij AMIS Matthieu de Graaf

19.45 Hoe maak je ‘saaie’ logdata sexy? Frank Houweling

20.00 Het nieuwe dashboard Edward Orlowski

20.15 UX demo’s en Serviceportaal Paco van der Linden

Merijn van der Linden

20.45 Afronding en Netwerkborrel @AMIS Café

5

Wat is een goede UI / UX

Een systeem met de gebruiker centraal, niet de producten,

de leverancier of de developer.

7

“If you notice the UX,

it is probably not designed correctly”

Quotes (1/2)

Het systeem kan het niet aan als (te) veel gebruikers gegevens zoeken (?!)

Dat kan niet, ons framework is namelijk gebaseerd op “standaard componenten”....

Dit systeem is niet echt arbeidsvreugde verhogend…...

Dit framework maakt het makkelijk voor de ontwikkelaar, niet voor de gebruikers…...

Quotes (2/2)

Waarom moet ik eerst zoeken om “mijn” gegevens te vinden,het systeem weet toch wie ik ben?

Informatie delen met mijn collega van een andere afdeling kan nu niet, foto’s delen met mijn zoon in Ghana kan ik wel

Het systeem weet toch wie ik ben, wat ik doe en wat ik belangrijk vind…. dus…

Van al deze velden op dit scherm…… gebruik ik alleen deze 2, de rest eigenlijk nooit.

Waarom zie ik een zandloper als ik naar de volgende rij spring?

Trends

● Waar vragen kanten naar?● Wat willen (potentiele) collega’s?● Wat wordt de standaard?

What is modern?

Hip?

Fashionable?

Requirements of modern UX

● Effectief

● Intuitief

● Anticiperend

● Autonoom / gepersonaliseerde

● Gebruik van defaults

● Groeperingen

● Effectief kleurgebruik

● Reactief

● Tijdigheid

● Vertrouwd / betrouwbaar

Effectief Meer doen in minder tijdKrijg jouw gegevens, Actuele taken, acties

16

Intuitief

Eenvoudig in gebruik,

geen instructie,

helder wat effect van actie is

Anticiperend,Maak gebruik van dingen die het systeem al weet.Geo, agenda, taken, klanten, targets, etcVerberg minder gebruikte zaken

18

Autonoom / gepersonaliseerde

Mijn user interface. Zelf menu, kleur, logo

volgorde items kunnen instellen.

19

Gebruik van defaults

Wat weet je al? Wat kan je gebruiken?

Taal, datum / tijd, veel gebruikte opties,

Voorkeur, locatie

.

Groeperingen Informatie die bij elkaar hoort als groep weergeven. Duidelijkescheiding tussen de informatie delen.

Reactief Geef de gebruiker feedback op wat hij doet. Save, edit, wissel scherm. Pas content en layout aan op gebruikte device

22

Effectief kleurgebruik

Geen felle kleuren. Complementair

Kleur theorie. Grijswaarden.

Benadruk wat belangrijk is.

Tijdigheid Snelheid waarmee de informatie beschikbaar is Toon die informatie op het moment dat je het nodig hebt (en niet eerder)

25

Vertrouwd / betrouwbaarToon de bron van de gegevens en het tijdstip.

Laat zien wat de rechten zijn die bij de data hoort.

26

27

Wat maakt de mix

Functioneel

ExperienceEsthetisch

28

FunctioneelFunctioneel

ExperienceEsthetisch

29

EsthetischFunctioneel

ExperienceEsthetisch

ExperienceFunctioneel

ExperienceEsthetisch

31

Ben je tevreden met de UX die je maakt?

32

Een designer werkt er enkele dagen aan

33

Een ontwikkelaar bouwt het in een paar weken

34

Een gebruiker kijkt er enkele jaren naar!

35

Of maar 1 keer…..

36

UX is not what it does

It is how it makes you feel