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).

Les 1: De diverse interfaces voor "human machine interaction" komen aan bod. De hele geschiedenis van interfaces passeert de revue: CLI, GUI, NUI, AR, VR...

Les 2: 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 (https://www.schoolvoorbeeld.be/multimedia/Handboek). 

Les 3: Interface-prototypes bouwen met Adobe Photoshop en Adobe XD.

Les 4: Je vormt groepjes (3 tot 4 personen) en je kiest één van de 6 mogelijkheden hieronder. 

Lessen 5 en 6: Werksessies + demo over bouwen huisstijl (kleurpalet, lettertypes, logo-ontwerp.

Les 7: Bouw killerpresentaties

Week na de paasvakantie:

  • Deze opdracht wordt geëvalueerd voor permanente evaluatie. 
  • Je presenteert je werk voor een jury.
 Registreer je opdracht (verplicht)

Interface- en UX-ontwerp

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."
Installeer Pencil

Andere (commerciële) tools:

https://blog.prototypr.io/the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016-701263ae65e8

Digitaal ontwerp

Tijdens de les demonstreert de lector een aantal handige technieken in Adobe Photoshop en Adobe XD.

Tijdens de lessen toont de lector de conceptuele werking van Adobe Photoshop én Adobe XD. Tutorials zoek je zelf op internet (bijvoorbeeld YouTube)

Tips voor betere presentatie!!!

  1. 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.
  2. 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.
  3. 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!!!
  4. 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.
  5. Elk beeld = idee. Gebruik mooie afbeeldingen of achtergronden (niet meer dan één per dia) die iets meer vertellen over je verhaal.
  6. 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.
  7. 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.

            Opdracht UX

            Kies één van de opdrachten hieronder. Elke les bespreekt je groep de stand van zaken met één van de lectoren. 

            MOGELIJKHEID 1: Smartphone

            Ontwerp een bedieningsinterface voor een smartphone die de strijd moet aangaan met Apples iPhone en iOS én met Android. Je bedenkt dus een volledig nieuw type smartphone met besturingssysteem. Welke mogelijkheden stop je erin? Hoe ziet de interface eruit?

            MOGELIJKHEID 2: Domotica

            Een ultramodern domoticasysteem voor je woning: verwarming, beveiliging, verlichting, keuken... Alles zit geïntegreerd in één systeem. Je kan als bewoner uiteraard het systeem aansturen. Hoe ziet de bedieningsinterface voor jouw "domoticasysteem" eruit. Hoe stuur je de interface aan? Opgelet: bied een meerwaarde voor de gebruiker. Er bestaat al heel wat concurrentie. Waarom zouden we voor jouw systeem kiezen? 

            MOGELIJKHEID 3: Smart Glasses

            Bedenk de interface voor een smart-bril die de gebruiker zowel AR- als VR-mogelijkheden biedt. Wat kan de gebruiker met zijn bril allemaal doen? Hoe bedient hij het toestel. Houd ook rekening met mensen die sowieso al een bril moeten dragen omdat ze niet goed zien. Hoe los je dit op?

            MOGELIJKHEID 4: Car

            Bedenk een interface voor een slimme zelfrijdende auto. Zorg ervoor dat je je interface kan slijten aan andere automerken. Misschien moet je heel het dashboard zoals we het nu kennen opnieuw herdenken/bedenken. Aan jouw de keuze. 

            MOGELIJKHEID 5: Smart Shop

            Bedenk een manier om online en offline shoppen dichter bij elkaar te brengen. Probeer klanten in de "echte" winkel te krijgen, maar biedt hen toch een hoop digitaal gebruiksgemak via de smartphone, Augmented reality... Zoek eens op wat je allemaal kan doen met NFC (near field communication) en BLE (bluetooth low energy). 

            MOGELIJKHEID 6: Smart House

            Computerinterfaces versmelten stilaan met onze omgeving. Bedenk een concept voor een "smart house" zodat de bewoners niet langer afzonderlijke toestellen zoals computers, laptops en smartphones meer nodig hebben. 

            Immersive interfaces

            Werkwijze?

            1. Analyse van de doelgroep.

            2. Beschrijving van de functionaliteit. Bespreek en beschrijf grondig het INTERACTION DESIGN en het VISUAL DESIGN.

            3. Opbouw van minstens 5 “schermen”. Bij elk scherm een beschrijving waarom die keuze/opbouw: argumenteer aan de hand van de cursus.

            4. Bouw en selecteer een huisstijl. Voorzie een gepaste naam en logo voor je product. 

            5. Bij een huisstijl hoort een kleurpalet. Selecteer een professioneel kleurpalet en gebruik dat in je ontwerp én in je presentatie.

            6. Welke interface-technieken ga je gebruiken (vb. skeuomorfisch of niet)? Welke interactieve mogelijkheden? GUI, NUI, STAG?

            7. Maak een PDF-bestand met daarin al de voorgenoemde informatie (stap 1 tot 5). De opmaak van je PDF-bestand moet conform de huisstijl én foutloos.

            8. PITCH: Bouw een presentatie (met aangepaste huisstijl) en presenteer die aan het publiek alsof je hen wil overtuigen om uw ontwerp te kiezen en/of te investeren in de ontwikking. Die presentatie moet niet in PowerPoint... Je mag ook een presentatiefilmpje bouwen.

            Doel

            1. Inleveren via Toledo.

            2. Presenteren voor de groep + jury

            Aantal te behalen punten:
            15 voor PDF + 15 punten voor presentatie

            3. Anonieme peer evaluatie

            home