Software UI voor het PIM-systeem

Nieuwe user interface voor het Product Informatie Management (PIM) systeem.

Het project

Klantvraag:
De doelstelling voor deze opdracht is het geschikt maken van de gebruikersinterface voor data-, product- en marketingmanagers.

Deze drie doelgroepen werken allemaal op verschillende manieren met het PIM-systeem. Het stappenplan dat de doelgroep binnen het systeem doorloopt is:, het importeren, verbeteren en exporteren van data.

Mijn uitdagingen
• Maak de user interface geschikt voor meerdere doelgroepen.
• Momenteel doet zich het probleem voor dat de functionaliteiten in de huidige gebruikersinterface op uiteenlopende manieren worden gepresenteerd en gepositioneerd.
• Eindgebruikers ervaren verwarring en hebben moeite om de logica achter de interface te begrijpen.
• Het uitvoeren van onderzoek naar de interacties van de drie doelgroepen met het systeem.

Specifieke rol
Onderzoek, User testing, Cardsorting, Interaction Design, User Experience en overdracht Development team.


Eindconclusie

In de nieuwe gebruikersinterface is er een gevoel van rust gecreëerd door elke functionaliteit een plek te geven die aansluit bij één van de doelgroepen. Zo heeft elke doelgroep een eigen ruimte binnen de gebruikersinterface. Het dashboard speelt hierbij een centrale rol. Hier worden alle lopende taken weergegeven die specifiek zijn voor de betreffende doelgroep. Dit biedt de gebruiker een overzicht van wat er dagelijks van hen wordt verwacht. Bovendien wordt op dit dashboard aangegeven wanneer er wijzigingen, imports of exports binnen het systeem hebben plaatsgevonden. Hierdoor is de feedback vanuit het systeem sterk verbeterd.

Tijdens het onderzoek is naar voren gekomen dat bepaalde functionaliteiten niet goed zijn onderverdeeld en meerdere keren voorkomen binnen het systeem. Hierdoor bevond de datamanager zich regelmatig in het domein van de productmanager, wat het werken niet effectief maakte. Daarom is er nu een duidelijke workflow gecreëerd voor het importeren, verbeteren en exporteren van data. Dit wordt bereikt via een hoofdmenu met daaronder de vereiste functionaliteiten. Dankzij deze oplossing komen de functionaliteiten niet meer dubbel voor en weten de verschillende doelgroepen direct welk menu voor hen bestemd is.

Van oud naar nieuw

HUIDIGE SITEMAP

De huidige sitemap toont veel dubbele opties zoals "zoeken", "filteren", "importeren", "exporteren" en "afdrukken". Dit komt doordat ervan uitgegaan wordt dat de gebruiker per menu-item opnieuw zoekt. Bijvoorbeeld: binnen "assortiment" kan alleen binnen dat assortiment worden gezocht. Dit geldt ook voor de andere opties.

NIEUWE SITEMAP

Uit onderzoek blijkt dat gebruikers veel dubbele functies in de user-interface ervaren, zoals "zoeken", "filteren", "importeren", "exporteren" en "afdrukken". Deze functies zouden idealiter op het hoogste niveau beschikbaar moeten zijn, zodat ze in het hele systeem bruikbaar zijn.

Om de structuur te bepalen, is vooraf een cardsorting-test uitgevoerd. Hieruit blijkt dat een duidelijk onderscheid tussen het hoofdmenu en het submenu noodzakelijk is. In het hoofdmenu moeten de belangrijkste menu-items staan, zoals: importeren, producten, artikelen, exporteren, ETIM, instellingen, help en uitloggen. Acties die gebruikers kunnen uitvoeren, zoals bewerken en toevoegen, worden in het submenu geplaatst.

IMPORTEREN

Het eerste menu-item dat de gebruiker ziet, is "importeren". Hier kunnen bestanden worden geïmporteerd naar het PIM-systeem. Uit onderzoek blijkt dat er slechts één ingang mag zijn voor het uitvoeren van functies. Daarom is ervoor gekozen om één centrale plek te creëren voor het importeren van bestanden.

PRODUCTSCHERM

Dit scherm wordt het meest gebruikt, omdat gebruikers hier data kunnen beheren, bewerken en classificeren. Daarom is een duidelijke indeling gemaakt in drie gebieden: navigatie, opties en data.

• Navigatie (links bovenin) toont het product of artikel, inclusief ETIM-productkenmerken en fabrikant.
• Opties staan onder het kruimelpad, met de belangrijkste functie (data toevoegen) rechts geplaatst.
• Overige opties bevinden zich onderin de linkerkolom, omdat deze minder vaak worden gebruikt.

Product toevoegen
Dit scherm verschijnt wanneer de gebruiker op "product toevoegen" klikt. Hierin is de linkerkolom gereserveerd voor navigatie- en filteronderdelen, wat de UI gebruiksvriendelijker en intuïtiever maakt.

In het ontwerp worden tabbladen in de linkerkolom gebruikt om informatie logisch te groeperen. Deze keuze helpt bij het structureren van de inhoud en maakt het systeem gemakkelijker te leren. .

PRODUCT BEKIJKEN

Dit scherm verschijnt wanneer de gebruiker op het "oogje" klikt op de product- of artikelpagina. Hier kunnen de productdetails worden bekeken.

Om de informatie toegankelijker te maken:
• Tooltips zijn toegevoegd bij termen waarvan de betekenis mogelijk onduidelijk is.
• Twee kolommen worden gebruikt om alle content direct zichtbaar te maken, zonder te hoeven scrollen. Dit verhoogt het gebruiksgemak van de UI.

PRODUCT BEWERKEN

In dit scherm worden onder "classificatie" meerdere opties weergegeven. Er is bewust gekozen om de tekst in het invoerveld rechts uit te lijnen, zodat gebruikers de velden sneller invullen. Dit verkleint de afstand tussen de tekst en het invoerveld, wat de invoersnelheid en gebruiksvriendelijkheid bevordert.

FILTERS BEHEREN

De filters zijn uitgebreid met meerdere opties zodat de gebruiker specifieker kan filteren. Ook is er een optie om het ingestelde filter op te slaan zodat deze gemakkelijk op een ander moment weer geactiveerd kan worden.

EXPORTEREN

Dit is het vierde menu-item in het hoofdmenu. Onderzoek toont aan dat gebruikers liever niet eerst naar het productscherm gaan om producten te exporteren, maar dit direct op het hoogste niveau willen beheren. Daarom is deze functie als menu-item toegevoegd.

Bij het publiceren is er geen linkerkolom, omdat er geen tabbladen zijn, wat meer ruimte biedt voor de invulvelden. Alle veldteksten zijn rechts uitgelijnd om de invoer te versnellen. De kleinere afstand tussen tekst en veld maakt het sneller voor de gebruiker. Bij de dropdownmenu’s is placeholder-tekst toegevoegd om duidelijk te maken dat een keuze uit de lijst gemaakt moet worden.

NOTIFICATIECENTRUM

Uit onderzoek bleek dat gebruikers liever meldingen ontvangen die ze kunnen terugleiden, in plaats van foutcodes. Daarom is een notificatiecentrum ontwikkeld waar alle meldingen van de gebruiker worden weergegeven.

Het notificatie-onderdeel biedt gebruikers meer feedback en de mogelijkheid om berichten terug te lezen, zodat ze niet meteen op alle systeemberichten hoeven te reageren. De belangrijkste onderdelen zijn de afbeeldingen en de uitleg over de notificaties. De afbeelding neemt 1/3 van de breedte in beslag, de uitleg 2/3, zodat de notificatie centraal staat.

Tijdens tests gaven gebruikers aan het handig te vinden om meldingen terug te lezen, zonder direct te moeten reageren. Er worden drie meldingen tegelijk getoond, afgebakend door een lijn voor duidelijkheid. Berichten kunnen verwijderd worden door op het kruisje te klikken, en het notificatiecentrum zelf kan gesloten worden door op "sluiten" te klikken. Dit onderscheidt het sluiten van het venster van het verwijderen van een bericht.

INSTELLINGEN

De instellingen zijn bereikbaar vanuit het hoofdmenu. Uit onderzoek bleek dat gebruikers bedrijfs- en persoonlijke instellingen apart willen zien, zodat het verschil duidelijker is.

Het instellingenscherm heeft dezelfde indeling als "filter maken" en "lay-out bewerken", waardoor het herkenbaar en gebruiksvriendelijk is voor de gebruiker. Tijdens gesprekken met experts is besloten om instellingen die maar één keer hoeven te worden ingesteld, onder "configuratie" te plaatsen. Dit tabblad is uitklapbaar, zodat de gebruiker alleen de noodzakelijke informatie ziet.

MELDING MAKEN

Gebruikers kunnen meldingen aanmaken binnen het PIM-systeem, bijvoorbeeld voor wensen, vragen of fouten. Uit onderzoek bleek dat gebruikers deze functie als handig ervaren.

Bij het maken van een melding zijn drie onderdelen belangrijk: gebruikersinformatie, het type melding en de melding zelf. Deze onderdelen zijn opgesplitst en onder elkaar geplaatst, zodat niet alle informatie in één keer gevraagd wordt.

Het eerste blok bevat informatie over de locatie van de gebruiker binnen het systeem, zodat de helpdesk snel kan helpen. Daarnaast kan de gebruiker een afbeeldingen toevoegen ter ondersteuning van zijn verhaal.