Archief - Schoolopdracht Usablity Webshop

Achtergrond:
Als eerste jaar MCT'er moet ik een opdracht maken voor Webdesign Usability. Hier heb ik echter nog maar een paar lessen ven gehad. Samen met een paar lessen webgraphics is dat mijn enige basis van webdesign. Buiten in mijn vrije tijd voor de opleiding enzo wel wat als hobby.

De opdracht:
We moeten een ontwerp maken van de startpagina van een webshop voor stripboeken dat niet alleen op design en creativiteit wordt beoordeeld maar vooral op usability.
De voorwaarden:
- ontwerp in 1024*768
- ontwerp in Photoshop of Illustrator
- Secties (non fictie, fictie, cartoons en kinderstrips) moeten terug te vinden zijn
- Klantendienst
- Er moet een duidelijke knop zijn naar de winkelwagen/kassa
- Advertentie mogelijkheden
- Nieuwe strips en/of promoties
- Strips aangeboden moeten info bevatten (msdn nummer, auteur, ...)
- enkel verticale scrolling
- Titel en slogan in banner

Het ontwerp
ImageShack - Image Hosting :: ontwerp1024op768hl0.png

Ik ben benieuwd naar jullie mening. Ik weet dat hier een aantal pro's zitten die mij ongetwijfeld nog goeie tips kunnen geven ivm usability. Andere commentaren zijn ook welkom. Weet dat het mijn eerste design is.

Voor je eerste design vin ik dit wel goed, het moet niet perfect zijn maar de nodige dingen staan erop en het oogt deftig dus experimenteer verder en werk dan ook gewoon verder je zal dan nog genoeg problemen tegenkomen .
Succes

Hmm, qua usability vind ik dit toch niet zo ideaal. Je hebt overal zodanig veel contrast ingestoken dat elk deel van de pagina om aandacht schreeuwt, het oog weet niet waar het eerst kijken moet. Er zou meer hiërarchie moeten inzitten, meer structuur ivm belangrijke en minder belangrijke elementen. En de kleuren zouden wat beter uitgebalanceerd moeten worden tov elkaar.

De leestekst mag ook gerust een stukje kleiner gezet worden. Vergeet ook niet het belang van witruimte!

Verder zou ik de radius van de afgeronde hoeken ook een stuk kleiner doen, maar dat gaat enkel om het ontwerp, niet om usability

Hopelijk ben je hier iets mee! Je kunt op het internet trouwens massaal veel tips vinden ivm usability, zoals bv hier of hier.

Het is ondertussen al een heel onpopulair woord geworden, maar ik zou voor een vak "usability" precies een beetje undesignen: om te beginnen donkere tekst op een lichte achtergrond en niet omgekeerd. Gradients: weg, rounded corners: weg, zoekvak en buttons al te fel opmaken: al helemaal weg...

Nuja, tis een ziekte die natuurlijk eigen is aan het "onmiddellijk in Photoshop ontwerpen". Probeer Illustrator eens uit om om te beginnen je grid al goed te krijgen (zie ook 24 ways: Compose to a Vertical Rhythm en 960 Grid System en The Grid System). Hou de kleuren van je hyperlinks standaard, laat ze onderlijnd, ... Dit ontwerp heeft helaas weinig met usability te maken. Ik vind het bovendien ook helemaal niet mooi of leuk om naar te kijken, dus ik denk dat het op beide vlakken een beetje tekort schiet. Concentreer je eerst en vooral op de usability en sla daarna pas aan het designen (hoewel usability een integraal proces van design is natuurlijk). Good luck!

Het niveau van de doorsnee mct student is vrij laag. Dus je bent er wel door als je dat afgeeft . Tis niet goed, maar ook niet zeer slecht...

echter vind ik die bevel and emboss en kleuren afschuwelijk.

ok bedankt, zal er misschien nog wel aan werken dan. Als ik de resultaten van andere studenten bekijk denk ik dat ik hiermee wel er door kan geraken hoor.

Always compare with the best, not with the ones equally well .

koebeest zei:

Het niveau van de doorsnee mct student is vrij laag. Dus je bent er wel door als je dat afgeeft . Tis niet goed, maar ook niet zeer slecht...

echter vind ik die bevel and emboss en kleuren afschuwelijk.

Klik om te vergroten...

Even off-topic: waar leid je dat dan precies uit af, dat het niveau van een doorsnee mct'er vrij laag ligt ?
Wat heeft iedereen toch tegen mct'ers
En de doorsnee zegt trouwens niets over de rest

@topicstarter: Zit je in MCT in Kortrijk (PIH) ?
Je ontwerp vind ik niet mis maar als het een opdracht naar usability toe is, dan zou ik ook de achtergrondkleur lichter maken en je tekst donkerder.
Die rounded corners hebben niets met usability te maken me dunkt, als de content maar duidelijk is !
Als je eerst nadenkt over je usability-opdracht en daarna je design wat gaat verzorgen (niet omgekeerd) dan komt het wel goed !

Nee in Hoboken (KdG). Wat die kleuren betreft, dit hoop ik later te kunnen bevestigen aangezien we in onze lessen daar niks over hebben gezien. Ik zal zeker eens spelen met de kleurenç!

Wat de richting MCT betreft, zijn er vele die hier een vertekend beeld van hebben. MCT is (bij ons in het eerste jaar) zeker geen webdesign richting, dus het niveau kan helemaal niet hoog liggen. Het eerste jaars spitst zich meer toe op vakken zoals technologie, programmeren, audio en video. Webdesign is echter maar een heel klein pakket dus verwacht van een eerste jaar MCT geen prachtsites.

Stom Detail: De Suske & Wiske strip in promotie is wel belachelijk duur!

Da zal nen hardcover zijn hé

ja die prijzen zijn maar gewoon ter illustratie ik zal binnenkort men afgewerkte versie er hier nog eens opzetten. We hebben tussentijdse feedback gekregen van den docent.

En hoe was de feedback?

Streetrunner zei:

Even off-topic: waar leid je dat dan precies uit af, dat het niveau van een doorsnee mct'er vrij laag ligt ?
Wat heeft iedereen toch tegen mct'ers
En de doorsnee zegt trouwens niets over de rest

@topicstarter: Zit je in MCT in Kortrijk (PIH) ?
Je ontwerp vind ik niet mis maar als het een opdracht naar usability toe is, dan zou ik ook de achtergrondkleur lichter maken en je tekst donkerder.
Die rounded corners hebben niets met usability te maken me dunkt, als de content maar duidelijk is !
Als je eerst nadenkt over je usability-opdracht en daarna je design wat gaat verzorgen (niet omgekeerd) dan komt het wel goed !

Klik om te vergroten...

Ik deed MCT in kortrijk De ontwerpen die daar door raakten maakte ik 5 jaar terug

ik kreeg vooral commentaar op design maar waar ik aan moest werken was:

- rechts boven aan moet "zoeken [ ] go" worden dankzij onze vriend Google

- Meer info onder de strips enzo moet "Lees meer" zijn, zet meer aan tot actie, was een tip AnySurfer die onlangs op onze school een presentatie is komen geven.

- Er zijn te veel inspringen op de site, zo zou ik er voor moeten zorgen dat de advertentie, de tekst, en mijn menu items uitgelijnd staat op elkaar. hij gaf het voorbeeld van de non fictie knop, dan spring je naar rechts onder naar de advertentie, en dan spring je terug naar links, uitlijnen dus. Ik denk dat dat overeen komt met de comment van Xavez ivm die grids?

- Verder had hij het bolletje onder startpagina graag in een ander kleur gezien om extra te benadrukken dat dat de actieve pagina is

- De titel en tagline moeten in 1 tekstballon zodat de tagline op 1 regels past, de titel moest ook verder naar onder toe

- de "striphoop" in de banner moet kleiner

- Tekst naast die strips enzo, moest kleiner

- Verder was hij heel tevreden over dat "kassagedeelte" links onder, het main panel met de "over ons" enzo, breadcrumbs links boven, ster van aanbieding en de klantendienst.

Het was in elk geval al een nuttige oefening, heb veel bijgeleerd.
Ik heb trouwens ook de commentaar die ik hier kreeg over die kleuren aangehaald, hier was echter ni per se iets mis mee volgens hem.