Aanbevelingen voor het optimaliseren van de indeling
Van toepassing op deze goed ontworpen Power Platform-aanbevelingenchecklist voor belevingsoptimalisatie:
| XO:06 | Bruikbare en visueel aantrekkelijke indelingen handhaven voor alle schermformaten en resoluties. Gebruik adaptieve technieken om inhoud op verschillende manieren dynamisch weer te geven. |
|---|
In deze guide worden de aanbevelingen beschreven voor het ontwerpen van schermindelingen die gemakkelijk te navigeren zijn en die zich vloeiend aan verschillende apparaten aanpassen. Deze aanpak zorgt ervoor dat gebruikers een consistente en optimale kijkervaring hebben, welk apparaat ze ook gebruiken.
Definities
| Term | Definitie |
|---|---|
| Viewport | Zichtbaar gedeelte van een digitale interface, zoals een webbrowser of mobiele app, waar inhoud wordt weergegeven. Viewport-bereiken worden vaak geassocieerd met apparaatklassen (mobiel, tablet en bureaublad) op basis van schermafmetingen en resoluties. |
| Onderbrekingspunten | Specifieke pixelwaarden die viewport-bereiken definiëren die worden gebruikt om adaptief indelingsgedrag te bepalen. |
Belangrijke ontwerpstrategieën
Responsieve indelingen bieden een flexibele en efficiënte gebruikerservaring in verschillende vensterformaten. Ze passen zich aan door de inhoud te schalen, elementen te herschikken en tekst en afbeeldingen selectief weer te geven. Responsieve indelingen voorzien in de behoeften van gebruikers, ongeacht de grootte van hun scherm.
Een consistent app-frame bepalen
De applicatie frame bestaat uit een set bedieningselementen die op elk scherm beschikbaar zijn. Het bestaat uit drie hoofdonderdelen: een header, navigatie en een inhoudsgebied. Eenvoudige apps hebben de flexibiliteit om het header-onderdeel te kunnen gebruiken, terwijl meer geavanceerde apps vaak navigatie aan de zijkant gebruiken om meerdere pagina's mogelijk te maken. Subonderdelen zijn aanpasbaar. U kunt bijvoorbeeld een algemene zoekopdracht in de header opnemen of items in de navigatie aan de zijkant groeperen, afhankelijk van de vereisten van uw app.
De drie belangrijkste subcomponenten van de app frame zijn:
De header is een kernonderdeel dat is ontworpen om deel uit te maken van elke interne toepassing. De header bestaat uit subonderdelen die gebruikers toegang geven tot systeembrede functies, hen helpen zich te oriënteren op de gebruikersinterface en consistentie te bieden voor alle ervaringen. De header verschijnt bovenaan het app-frame en zou op alle pagina's van de app moeten blijven staan. Hier vindt u mogelijk algemene opdrachten, zoals zoeken, instellingen, meldingen, feedback, profiel of help. De naam van de app moet altijd worden weergegeven en zou idealiter ook moeten dienen als een klikbare koppelen naar de start- of landingspagina. De header moet responsief zijn, waarbij opdrachten naar het overloopbesturingselement gaan in viewports van 600 pixels en minder. De breedte van het zoekvak is ook responsief op 1023 pixels en minder.
Navigatie is een systeem van besturingselementen die samenwerken om gebruikers te helpen informatie te vinden en taken uit te voeren. Met navigatie kunnen gebruikers van sectie naar sectie van een toepassing springen. Hiërarchisch gezien is de navigatie niet aan een pagina of sectie gekoppeld, maar staat deze boven alle andere inhoud. De navigatie is altijd aanwezig en kan worden geminimaliseerd naar een samengevouwen staat (ook wel een railstatus genoemd) om extra ruimte vrij te maken voor pagina-inhoud. Bij kleinere venstergroottes kan de navigatie worden geminimaliseerd tot een uitklapmenu. De meest voorkomende vormen van navigatie zijn bovennavigatie en zijnavigatie. Gebruik ze niet allebei tegelijkertijd.
Het inhoudsgebied bevat de focus van het scherm. De grootte van het browservenster beïnvloedt het inhoudsframe en de beschikbare ruimte in het hoofdinhoudsgebied. Dit frame past zich aan op basis van het onderbrekingspunt en het bijbehorende responsieve gedrag van elk onderdeel. Zie Een onderbrekingspuntmatrix maken voor meer informatie.
Het inhoudsgebied kan optioneel verschillende subgebieden bevatten die beschikbaar zijn voor consistente plaatsing van elementen, zoals een paginakop, inline zijdeelvenster of panelen die de inhoud overlappen.
Door een consistente ontwerptaal te hanteren met kleurenschema's, typografie en indelingsstructuur, kunnen gebruikers verschillende elementen snel identificeren en er zonder verwarring mee interacteren. Hoe consistenter een app-framepatroon wordt gebruikt in alle interne zakelijke toepassingen, hoe sterker het overeenkomst- of mentale model van de gebruiker wordt. Afstemmen op industriestandaarden of gemeenschappelijke platformpatronen versterkt dit effect nog verder.
Nadat de app frame is bepaald, bevindt de indeling van elk scherm zich in het inhoudsgebied van de app frame.
Gebruik de inhoudsgebied zorgvuldig
Gebruikers houden van naadloze ervaringen waarbij informatie gemakkelijk toegankelijk is, tekst gemakkelijk te lezen is en esthetiek de bruikbaarheid eerder bevordert dan belemmert. Geef prioriteit aan de eerste zichtbaarheid van belangrijke informatie, zorg dat alle kolommen leesbaar zijn en stem ontwerpelementen op elkaar af voor een aantrekkelijke aanblik.
Zorg ervoor dat belangrijke informatie direct zichtbaar is wanneer u het scherm opent, zonder dat u hoeft te scrollen. Geef prioriteit aan de weergave van essentiële informatie, zoals navigatieopties, cruciale inhoud en bruikbare informatie bovenaan het scherm. Het is een voortdurende uitdaging om een evenwicht te vinden tussen het tonen van voldoende items en het verstrekken van gedetailleerde informatie over elk item. Omgekeerd is het zo dat, hoe verleidelijk het ook is om alle mogelijke informatie in de eerste weergave weer te geven, gebruikers door te veel informatie overweldigd kunnen raken waardoor het belang van de belangrijkste elementen afneemt. Overweeg het gebruik van beknopte overzichten of previews die een voorproefje geven van meer gedetailleerde inhoud, waardoor gebruikers worden verleid om verder te lezen. Dashboards worden geoptimaliseerd voor dit doel, namelijk het visualiseren van grote hoeveelheden gegevens.
Gebruik meerdere kolommen, secties of groeperingen om de inhoud logisch te ordenen en de ruimte optimaal te benutten. Let heel goed op de kolombreedte, zodat de tekst leesbaar blijft zonder dat dit al te veel moeite kost. Vermijd te smalle kolommen die gebruikers dwingen voortdurend horizontaal te scrollen, waardoor de interactieflow wordt verstoord. Omgekeerd kunnen te brede kolommen de leesbaarheid belemmeren, waardoor gebruikers regels over grotere afstanden moeten volgen. Streef naar een balans die comfortabel lezen mogelijk maakt en tegelijkertijd de beschikbare ruimte efficiënt benut.
Pas de grootte en positie van visuele elementen aan om een visueel aantrekkelijke en evenwichtige interface te creëren. Lijn bijschriften uit met bijbehorende afbeeldingen of titels, zorg voor een consistente ruimte tussen de elementen en houd u aan een hiërarchie op basis van de behoeften van de gebruiker. Laat onnodige verfraaiingen weg en wijs pixels zorgvuldig toe aan de elementen die er het meest toe doen. Geef prioriteit aan en benadruk inhoud en navigatie-elementen, met name in apps of op startpagina's die veel navigatie vereisen. Vermijd overbodige versieringen die afbreuk doen aan de bruikbaarheid.
Een onderliggend raster kan handig zijn om elementen consistent te rangschikken. Het gekozen rastergedrag moet consistent zijn in de inhoudsgebieden van elk scherm in de app en kan ook worden toegepast op onderdeelniveau, zoals kaarten of zijdeelvensters. Het meest voorkomende type rasterindeling dat in webtoepassingen wordt gebruikt, is het kolomraster. Vloeiend (of uitgerekt) rastergedrag wordt aanbevolen voor het implementeren van responsieve schermen.
Gebruik bestaande indelingen en groeperingspatronen
Gebruik algemeen erkende structuren en indelingen voor het organiseren van inhoud en elementen binnen een gebruikersinterface. Deze indelingen en patronen zijn in de loop der tijd verfijnd en effectief gebleken, waardoor ze vertrouwd en intuïtief zijn geworden voor gebruikers en het ook gemakkelijk is geworden om adaptieve patronen te implementeren. Zodra de kernscenario's en -elementen zijn geïdentificeerd, wijst u elk toe aan een bestaande indeling die de beste interactie oplevert. Geef prioriteit aan inhoud en functies die belangrijk zijn voor het voltooien van taken. Bepaal welke elementen altijd zichtbaar en toegankelijk moeten zijn op het scherm en welke verborgen kunnen zijn of toegankelijk kunnen zijn via andere menu's of acties.
In de onderstaande lijst vindt een (niet volledige) lijst van bestaande indelingen die vaak worden gebruikt voor zakelijke of productiviteitstoepassingen. Alles kan binnen het hoofdinhoudsgebied worden geplaatst.
Landings-/startscherm
Het startscherm fungeert als toegangspunt tot een applicatie en biedt gebruikers een overzicht van de aanbiedingen of functies van de app. Meestal is het doel hiervan om de aandacht van bezoekers te trekken en hen aan te moedigen om een specifieke actie te ondernemen, zoals voor het eerst taak invullen of meer content bekijken. Het bevat vaak hero-afbeeldingen en duidelijke navigatieopties.
Dit scherm is ideaal om gebruikers te verwelkomen, snelle toegang te bieden tot belangrijke functies, navigatieopties of call-to-actions, en de toon te zetten voor de ervaring in de app. Geef prioriteit aan duidelijkheid, eenvoud en intuïtieve navigatie om gebruikers effectief te geleiden.
Dashboard
Een dashboard is een centrale hub binnen een applicatie die gebruikers een uitgebreid overzicht biedt van relevante gegevens of informatie. Het bestaat vaak uit aanpasbare widgets of modules, waarmee gebruikers specifieke metrische gegevens kunnen volgen of acties kunnen uitvoeren.
Dashboards zijn geschikt voor toepassingen met complexe gegevenssets of veelzijdige functies. Hiermee kunnen gebruikers de voortgang kunnen volgen, trends analyseren en in één oogopslag weloverwogen beslissingen nemen. Ze zijn met name handig voor analyseplatforms, tools voor projectmanagement en apps voor financieel beheer.
Formulier
Een formulier is een gestructureerde indeling die gegevensinvoer van gebruikers vergemakkelijkt, meestal bestaande uit velden voor het invoeren van verschillende soorten informatie, zoals tekst, cijfers, datums en selecties. Formulieren zijn essentieel voor het verzamelen van gebruikersinvoer, het verwerken van transacties en het faciliteren van interacties binnen toepassingen.
Ze worden vaak gebruikt bij registratiestromen, afrekenprocessen, gegevensinvoertaken en elk scenario waarvoor gebruikersinvoer of feedback vereist is.
Entiteits-/profielweergave
De entiteits- of profielweergave geeft gedetailleerde informatie weer over een specifieke entiteit, zoals een gebruikersprofiel, productvermelding of inhoudsitem. Bevat doorgaans beschrijvende tekst, multimedia-elementen en relevante acties of interacties.
Ze zijn zeer geschikt voor het weergeven van gedetailleerde informatie over items binnen een toepassing. Ze bieden gebruikers diepgaande inzichten, vergemakkelijken de besluitvorming en ondersteunen de betrokkenheid bij specifieke entiteiten, zoals gebruikersprofielen in sociale netwerkapps of productvermeldingen binnen e-commerceplatforms.
Lijstpagina
Een lijst of tabel geeft een verzameling items of entiteiten weer in een gestructureerd formaat, vaak gepresenteerd in een lineaire of raster indeling. Bevat doorgaans korte samenvattingen of voorbeelden van elk item, samen met navigatieknoppen voor bladeren of filteren.
Lijstpagina's zijn effectief voor het weergeven van grote sets inhoud of gegevens in een behapbaar formaat, waardoor gebruikers efficiënt kunnen scannen, zoeken en navigeren. Als acties op specifieke rijen zijn ingeschakeld, moet het proces duidelijk zijn. Lijstpagina's worden vaak gebruikt in contentmanagementsystemen, lijsten met mappen, zoekresultaten en nieuwsfeeds.
Minibeoordeling (gesplitst scherm)
Een minibeoordeling of splitscreen verdeelt de interface in twee afzonderlijke secties. Aan de linkerkant wordt een lijst weergegeven en aan de rechterkant een itemweergave. De lijst bevat doorgaans een verzameling items, terwijl de itemweergave gedetailleerde informatie biedt over het geselecteerde item in de lijst.
Deze indeling is vooral effectief in scenario's waarin gebruikers snel door een lijst met artikel moeten bladeren en tegelijkertijd gedetailleerde informatie over elk artikel moeten bekijken, zoals bij het uitvoeren van bulkbewerkingen. Productcatalogi, documentbeheersystemen, e-mail- of communicatieclients en hulpprogramma's voor taakbeheer (bijvoorbeeld Azure Dev Ops-queryviewer) zijn scenario's die doorgaans in dit patroon passen.
Wizard
Een wizard begeleidt gebruikers door een reeks opeenvolgende stappen of taken, meestal op lineaire wijze, om een complex proces te voltooien of een specifiek doel te bereiken. Het bevat vaak voortgangsindicatoren, prompts en validatiecontroles. Wizards zijn nuttig voor het vereenvoudigen van complexe processen, het verminderen van cognitieve overbelasting en het begeleiden van gebruikers door onbekende taken of werkstromen. Ze worden vaak gebruikt in onboardingstromen, instellingsprocessen, meerstapsformulieren en taakgebaseerde interacties zoals het configureren van complexe instellingen of transacties.
Pas de standaardindeling aan en bouw erop voort om aan specifieke vereisten te voldoen. Dit proces kan het toevoegen of verwijderen van elementen omvatten, het aanpassen van de grootte en positionering van elementen en het toepassen van stijlelementen om de indeling te laten aansluiten bij de merkidentiteit of visuele ontwerprichtlijnen. Experimenteer met verschillende configuraties en variaties op de standaardindeling om de meest effectieve indeling voor inhoud en algehele gebruikerservaring te vinden.
Ontwerp indelingen voor alle apparaten
Indelingen zijn het resultaat van gedefinieerde regels en een opzettelijke organisatie van de inhoud. Het is belangrijk dat u uw inhoud zorgvuldig structureert, maar om te zorgen dat alles in één geheel samenvloeit met een duidelijke hiërarchie tussen platforms en schermformaten, is schaallogica vereist. Individueel, adaptief en responsief ontwerp zijn tegen deze uitdaging opgewassen. In sommige gevallen is een mix van adaptief en responsief ontwerp de juiste keuze.
Responsief ontwerp gebruikt slechts één indeling, waarbij de inhoud vloeiend is en zich kan aanpassen aan veranderende formaatgroottes. Deze ontwerptechniek maakt gebruik van mediaquery's om de kenmerken van een bepaald apparaat te inspecteren en de inhoud dienovereenkomstig weer te geven. Met een responsief ontwerp kunt u een functie één keer bouwen en deze effectief laten functioneren op alle schermformaten.
Een adaptieve indeling verandert volledig op basis van de indeling waarin deze wordt getoond. Adaptief ontwerp heeft meerdere vaste indelingsformaten en zorgt ervoor dat de browser een bepaalde indeling laadt op basis van de beschikbare ruimte. Websites die met adaptief ontwerp zijn gebouwd, gebruiken mediaquery's om onderbrekingspunten te detecteren, vergelijkbaar met responsief ontwerp. Ze gebruiken ook aanvullende correcties op basis van de mogelijkheden van het apparaat. Dit proces wordt ook wel 'progressieve verbetering' genoemd.
Herpositioneren
Wijzig de positie van pagina-elementen.
Houd uw inhoud georganiseerd, leesbaar en evenwichtig door de compositie te optimaliseren naarmate het venster groter wordt. Verticaal gestapelde elementen op een mobiele viewport kunnen bijvoorbeeld horizontaal worden verplaatst op grotere viewports. Deze verandering volgt een natuurlijke leesvolgorde van links naar rechts, zorgt voor balans in het ontwerp en houdt de visuele focus op de belangrijkste elementen op de pagina.
Formaat wijzigen
Wijzig de grootte en marges van pagina-elementen.
Pas het formaat van pagina-elementen aan om te optimaliseren voor een rijke gebruikerservaring door meer inhoud boven aan het venster weer te geven, waardoor verticaal scrollen minder nodig is. Pas de paginamarges aan om witruimte aan de indeling toe te voegen en deze meer in balans te brengen, waardoor de inhoud de ruimte heeft en de visuele aantrekkingskracht van het ontwerp wordt vergroot. Een hero-onderdeel kan zich bijvoorbeeld over de volledige breedte van het venster uitstrekken om meer van de achtergrondafbeelding weer te geven. De inhoud onder de afbeelding kan worden uitgebreid, maar gebruik verschillende marges om variatie aan te brengen in de indeling en de visuele hiërarchie te helpen definiëren.
Opnieuw plaatsen
Optimaliseer de flow van pagina-elementen.
Aanpassen pagina-elementen aanpassen om ervoor te zorgen dat ze volledig worden weergegeven, rekening houdend met de venstergrootte en -oriëntatie, door de inhoud opnieuw te rangschikken. Een enkele kolom met inhoud in een kleiner venster kan bijvoorbeeld opnieuw worden geplaatst in een groter venster om twee kolommen met tekst weer te geven. Met deze techniek kan meer inhoud 'boven de vouwlijn' worden weergegeven.
Weergeven/verbergen
Optimaliseer de inhoud voor de venstergrootte en de stand ervan.
Toon of verberg pagina-elementen om de inhoud te optimaliseren voor de venstergrootte en de stand ervan. Deze responsieve techniek stemt de hoeveelheid informatie af op de kijkcontext. Categorieën die op een klein scherm verschijnen, kunnen bijvoorbeeld beperkte metagegevens weergeven, zoals een afbeelding, titel en koppeling, zodat andere informatie zichtbaar wordt gemaakt en de gebruiker zich beter kan focussen. Op een groter scherm kunnen categorieën aanvullende metagegevens weergeven, zoals een persona, datum en korte beschrijving, terwijl ze nog steeds binnen de viewport passen.
Herontwerpen
Splits pagina-elementen en inhoud op of vouw ze samen om de focus op belangrijke informatie en acties te behouden.
Deze aanpak is vergelijkbaar met het volgen van de praktijk van "progressieve openbaarmaking" in uw ontwerp, maar dan voor verschillende vensterformaten en -standen. Als u het venster uitbreidt, kan er bijvoorbeeld een lijst met artikelen worden weergegeven naast de details. Door deze visuele koppeling tussen de inhoud kunnen gebruikers eenvoudig een ander artikel selecteren. Op een kleiner scherm blijft de focus op het weergeven van belangrijke informatie.
Maak een onderbrekingspuntmatrix
Een breekpuntmatrix is een grafische weergave van het responsieve of adaptieve gedrag van het ontwerp van een applicatie op verschillende schermformaten en -oriëntaties. Normaal gesproken wordt een gestructureerd raster of gestructureerde indeling weergegeven waarin de reactie van het ontwerp op verschillende onderbrekingspunten wordt beschreven. Elk segment komt overeen met een specifieke schermbreedte en biedt inzicht in de structuur, indeling en functionaliteit van het ontwerp. Een onderbrekingspuntmatrix omvat overwegingen ten aanzien van schermbreedte, viewport-stand, ontwerpelementen, indelingsstructuur, inhoudspresentatie, navigatie, media en interactieve onderdelen, om te illustreren hoe het ontwerp van een website of app reageert op verschillende schermformaten en -standen. Deze aanpak helpt niet alleen bij het afronden van het ontwerp van elk scherm, maar maakt de implementatie ook eenvoudiger wanneer wijzigingen in de eigenschappen van belangrijke onderdelen expliciet worden bijgehouden en goed worden gecommuniceerd.
Power Platform-facilitering
Formulierindelingen voor modelgestuurde apps worden geconfigureerd met behulp van Power Apps Studio. Met de formulierontwerper kunnen makers elementen toevoegen aan een raster-structuur, waardoor formulierpagina's inherent responsief worden. Ingebedde aangepaste componenten zoals aangepaste pagina's, ingesloten canvascomponenten en Power Apps Component Framework-codecomponenten moeten responsief gedrag in hun implementaties opnemen. Aangepaste pagina's moeten bijvoorbeeld responsief gedrag op dezelfde manier implementeren als een pure canvas-app om correct te kunnen functioneren.
Canvas-apps vereisen expliciete configuratie voor elk onderdeel om responsief gedrag te implementeren, waardoor meer controle over de ervaring mogelijk wordt. Schermformaten worden bepaald in de app-definitie. Hiernaar kunt u verwijzen om de positie, het gedrag, de zichtbaarheid en andere relevante eigenschappen te bepalen.