Oefening interface-ontwerp
Tijdens deze lessenreeks ontwikkel je het prototype van de interface van een softwareservice. Dat is een mond vol :-). Een interface is de "laag" waarmee een computersysteem communiceert met de "buitenwereld". Dit kan een temperatuursensor of microfoon zijn, maar ook een scherm of muis. In onze lessen ligt de focus op de interactie tussen mens en "machine" (een USER INTERFACE).
Stap 1: Wat zijn interfaces?
De diverse interfaces voor "human machine interaction" komen aan bod. De hele geschiedenis van interfaces passeert de revue: CLI, GUI, NUI, AR, VR...
Stap 2: Brainstorm
Je vormt een groep. De lector geeft je een opdracht (https://www.schoolvoorbeeld.be/nodig/ui-opdrachten.pdf). Overleg hoe je dit wil aanpassen. Begin met een brainstorm. Zet je ideeën op papier.
- Kies één van de twee voor jouw groep aangeduide opdrachten (https://www.schoolvoorbeeld.be/nodig/ui-opdrachten.pdf).
- Bepaal de functionaliteit (wat wil je dat het allemaal doet of kan?)
- Bepaal de doelgroep (misschien wil je enkel voor ouderen, gehandicapten, rijken... werken)
- Zet je besluiten op "papier". Verzorg de vormgeving. Let op spelling en zinsbouw.
- Stuur je PDF in via Toledo voor maandag 23 maart!
Stap 3: UX- en UI-ontwerp + huisstijl
Nadat je feedback hebt gekregen van de lectoren, kan je starten met het ontwerpen van de USER INTERFACE voor je applicatie. Hiervoor kan je gebruik maken van Adobe XD. Dat programma kan je gratis downloaden.
Waar moet je rekening mee houden als je een "USER INTERFACE" bouwt? Waar moet je op letten? Storytelling: gebruik herkenbaarheid en storytelling bij een pitch.
Waar moet je rekening mee houden bij UX-design? Bekijk de presentatie op Presentatie "Soorten interfaces & UX-design" én lees zeker het bijhorende hoofdstuk in de cursus (Lees zeker het volledige deel over UI- en UX-design/interfaces in https://www.schoolvoorbeeld.be/nodig/smartboek.pdf).
Film over "huisstijl" en UX-design: heb je nog te goed (uitleg over huisstijlen, lettertypes, logo-ontwerp, kleurpaletten, UX-design...)
Op zoek naar een handige tool voor het bouwen van "mockups" en/of interfaces? Pencil is een gratis en open source tool met een massa mogelijkheden. Adobe XD komt uit de stal van Photoshop. Het heeft een heel uitgebreide toolset voor het bouwen van een interface-prototype en heeft ook heel wat presentatiemogelijkheden.
Installeer Adobe XD en/of Pencil voor het uitvoeren van de opdracht rond interface-ontwerp.
"Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms."
Andere (commerciële) tools:
Stap 4: Bouw killerpresentaties
Presentatietips
Tips voor betere presentatie!!!
- Een presentatie bouw je op het “einde”: Denk eerst grondig na wat je gaat vertellen. Nadien bouw je de presentatie. De presentatie visualiseert de mondelinge uitleg. De presentatie is geen “reproductie” van wat je vertelt en zeker geen spiekbrief.
- Eenvormigheid van stijl. Elke dia moet een onderdeel van hetzelfde verhaal lijken. Gebruik overal dezelfde opbouw, dezelfde kleuren, dezelfde achtergrond. MAAR: speel wel met lettertypes, letterkleur en lettergrootte. Gebruik geen kinderlijke lettertypes zoals Comic Sans.
- Overgangen en effecten. Niemand zit te wachten op teksten of beelden die binnen of buiten vliegen. Vermijd overgangseffecten. Toon elke dia heel strak na elkaar zonder effecten. GEBRUIK ZO WEINIG MOGELIJK ANIMATIES OF EFFECTEN!!!
- Less is more. Gebruik zo weinig mogelijk tekst. Gebruik zeker geen opsommingstekens. Gebruik een krachtig woord of een slogan in elke slide of een vraag. Liever één zin, één regel... dan meerdere regels.
- Elk beeld = idee. Gebruik mooie afbeeldingen of achtergronden (niet meer dan één per dia) die iets meer vertellen over je verhaal.
- Aantal dia's: Beperk je presentatie tot maximaal 10 dia's. In drie seconden moet de kijker begrijpen wat je met de dia wil vertellen.
- Takeaway: toon een besluit in je laatste dia. Iets om over na te denken. Iets waarover de kijker nadien nog nadenkt. Iets dat blijft hangen en bij blijft.
