Kan een minimalistische userinterface voor webwinkel werken?

[Henri Kroeze]

Ik ben in loze uurtjes een user interface aan het ontwerpen voor een nieuwe webwinkel. Deze winkel zou met een nieuwe naam naast mijn bestaande winkel moeten komen met een afgeleid assortiment, welk dan ook niet meer in mijn bestaande winkel aangeboden zal worden.

 

De interface is nogal afwijkend van wat 'algemeen gebruikelijk' is bij webwinkels. Dit ontwerp is zo minimaal mogelijk opgezet. Zo min mogelijk 'afleidende' informatie op de pagina's. Alles zo strak mogelijk. Veel tekst links en alleen de belangrijkste functie 'Koop Nu' is een button. Ik ben nog niet uit wat ik met de Checkout wil, want die is na de Koop Nu de belangrijkste knop.

 

De iPhone interface is als inspiratie gebruikt. Daarbij is veel informatie, die maar af en toe wordt geraadpleegd, gegroepeerd en met een klik benaderbaar. Dat heb ik ook ingebouwd. De data van de klant (Your Data), met inloggegevens, accountsettings, bestellingen, etc, en 'Our Data', met de Algemene voorwaarden, Hoe te kopen, Betalen, retouren, adresgegevens, etc. Alles dus verstopt achter twee tekst links. Dit ruimt lekker op op de hoofdpagina's.

 

Het vinden van artikelen doe je via de Start pagina: Browse by:

Nieuwe artikelen

Artikelen van fabrikant X

Artikeltype

 

Per bovenstaande 'tak' krijg je dan de relevante 'filters' aangeboden die voor die tak van belang kunnen zijn.

 

Het 'hoogtepunt' van de webwinkel zijn de artikel pagina's. Die blinken uit in strakke vormgeving en mooie fotografie.

 

Hiermee wil ik een webwinkel neerzetten waarin de nadruk komt te liggen op de producten, die een 'dat wil ik hebben' gevoel moeten opwekken en die nergens afleiden.

 

Graag zou ik willen horen of zo'n minimalistische vormgeving kans van slagen heeft, omdat ik het nog niet eerder ben tegengekomen bij andere webwinkels (of ik heb niet goed gezocht). De meeste interfaces bieden een keur aan opties, links en knoppen (net zoals mijn huidige webwinkel).

 

Zou het wat kunnen worden? Gewoon proberen is natuurlijk de beste methode om er achter te komen, maar het kost mij vrij veel inspanning om dit voor elkaar te krijgen, vandaar dit kleine vooronderzoek.

 

(nog niet verwerkt zijn onder andere een zoekfunctie, die moet op ieder scherm actief worden)

layout_HL.ppt

[StevenK]

Ik vind 'm super. Wat ik mis is een over aanwezige zoekfunctie.

[Highio]

Zie/volg de ontwikkelingen bij MobiCart als voorbeeld: http://www.mobi-cart.com/ Of templates die op Applestores geinspireerd zijn. Een term als 'one page check-out' levert ook veel informatie.

 

Hoe foto's van producten maken voor webwinkel biedt misschien ook inspiratie. Aanzichten of 360 graden foto's, zijn die ook niet inpasbaar binnen het nieuwe concept? Is een matrix met logo's van (schaalmodel-)merken ook geen fraaie visuele/intuitieve oplossing? Achtergrondafbeeldingen tonen en verloopjes maken, vind ik al geen minimalistisch design.

 

Groet,

 

Highio

[ShopJeRot]

Ik vind de productpagina (p. 4 in de ppt) er goed uitzien. Een grote productfoto in combinatie met de belangrijkste informatie. Niets revolutionairs, maar wel effectief. Extra informatie zoals een uitgebreide productomschrijving zou je ook onder de afbeelding kunnen plaatsen. De klant komt deze dan automatisch tegen als hij scrolt. Daar zou je ook zaken als up selling of cross selling kunnen plaatsen.

 

De productlijst (p. 3) is vrij standaard. Misschien is het beter om de producten in een raster te presenteren in plaats van in een lijst? Dan is er meer plaats voor de afbeelding. Maar dat is dus afhankelijk van hoe belangrijk deze afbeelding is voor de doelgroep.

 

Ik denk niet dat het presenteren van de producten zoals te zien op pagina 1 & 2 conversieverhogend werkt. Dit is een soort van tree-style browsen. Ik denk dat filters daar intuïtiever voor werken.

[Libertas]

Minder = meer. Ik denk dat je zeker een mooi uitgangspunt heb, echter wel de vraag, waarom de artikelen uit je andere webwinkel te halen? Unieke omschrijving, tekst, etc. en je kunt het heel goed dubbel aanbieden.

 

Verder, je hebt wel vier kliks tot je product. Eventueel zou je stap 1 en 2 kunnen combineren. Tevens zou je stap 3 en 4 kunnen combineren met een waaier systeem.

 

Verder: testen, testen en nog eens testen.

[Roel J]

Ik vind het een heel mooi ontwerp.. hou wel van minimalistisch...

 

Alleen die buy knop, ik weet dat het op moet vallen maar deze is spuuglelijk ik hoop dat de definitieve button er beter uit ziet of is dit de Hup Holland versie ;D

 

Op de derde slide heb je de button weggelaten bij de uitverkochte en de verwachte nieuwe auto's ik zag eerst het verschil niet.. Ik vind de klikbare tekst ook wat te weinig om de klant te verleiden. ik zou ook een button maken met "notify" voor out of stock items en Pre-order voor verwachte items.. o.i.d.

 

op de 4e slide. Ik zou de scale, de prijs en het merk bij de de buy knop zetten. Weet niet veel van modelauto's maar weet wel dat de schaal redelijk van belang is / kan zijn... en op deze manier staat alle relavante info voor de koop bij de buy button..

 

Verder een 5e slide gemaakt voor hoe een uitgebreidde omschrijving er uit kan zien wat mij betreft..

 

maar het hele idee van minimalistisch ontwerp spreekt me wel aan..

 

omdat een beeld meer dan 1000 woorden zegt (en het pielen mat ontwerpjes gewoon leuk is) ook maar even een aangepaste bijlage gemaakt waarin mijn opmerkingen zijn verwerkt..

 

Ik heb de knoppen geaccentueerd door verlopende kleur en een schadow volgens mij zijn ze opvallend genoeg zonder je strakke design niet verstoren.. hoewel ik ze misschien nog wel lichter zou maken als ze nu zijn maar dat is een kwestie van de juiste balans vinden..

 

layout_HL2.ppt

[Anoniem9876]

Fantastisch....

 

Ik heb ook wat moeite met pagina 2 maar ga je deze intrigeren op pagina 1 dan krijg je toch weer een "traditioneel model"

 

Ik zou hem zo online zetten en dan kijken wat pagina 2 doet.

[Frans Sijtsma]

Mooi design

 

Paar kleine dingen:

 

- De kleur van je buy-knop zou ik in oranjetinten doen en geen combinatie van groen en oranje. Op een of andere manier komt dat toch wat goedkoop over

- De knoppen uit het voorstel van Roel niet doen. Leidt alleen maar af van de koopactie die je wil.

- Linksboven twee links: [home] en [back] , wellicht hier ipv die 2 een kruimelpad opnemen

- Tekst [buy] eventueel vervangen door [add],

- in je productpagina onder de description wellicht de volgende links:

- related (voor gelijksoortige producten)

- extra (overzicht gerelateerde accessoires/andere uitvoeringsvormen, andere manier van verpakking)

- Het topic over 360° video/foto zou ideaal zijn voor jou. Lijkt me prachtig om de boel rond te kunnen draaien

- Eventueel aanvullende uitgebreide omschrijving op je productpagina (..more...) die je in de html van dezelfde pagina zet, dus geen link naar weer een andere pagina, en alleen zichtbaar maakt bij klikken.

 

Frans

 

PS. waar zoeken mensen die internationaal modelauto's zoeken eigenlijk het meeste op?

[SaskiaVD]

Als je het echt minimalistisch wilt maken, zou ik die achtergrondafbeelding en de verloopjes weglaten.

Eens met de eerdere opmerking van Shopjerot over het overzicht van categorieën.

[r.i.p. Ruben van den Oord]

"Perfectie is bereikt als er niets meer af kan" - Zou een Japans gezegde kunnen zijn.

 

Strip to the bone and test, test, test. Mij spreekt het wel aan, al zou je misschien een designer er nog even naar kunnen laten kijken. Die kan misschien nèt even dat verschil maken met de typografie. Maar verder: Gewoon Doen!

[Frans Sijtsma]

"Perfectie is bereikt als er niets meer af kan" - Zou een Japans gezegde kunnen zijn.

 

Het beste onderdeel is geen onderdeel - Zou zomaar een oud-hollands werktuigbouwkundig begrip kunnen zijn ;)

[Michiel Hennink]

Less is more: daar geloof ik absoluut in. Wel bestaat altijd het gevaar dat de boodschap verloren gaat door een te sterk verlangen naar minimalisme. In jouw ontwerp zie ik dat gebeuren. Zo maakt bijvoorbeeld de beginpagina (één van de belangrijkste pagina's) nauwelijks duidelijk wat je nu precies verkoopt: modelauto's, maar welk soort en waarin onderscheid je je?

 

Internetters bekijken websites volgens een vast patroon (een F-vorm). Wat er binnen jouw ontwerp van de beginpagina dan als eerste uitspringt, is de tekst "browse by". Zonde! Denk eerder aan een tekst als: "Webwinkel voor modellen van luxe auto's" (of iets in die trant). Enfin, je begrijpt wat ik bedoel: in een flits duidelijk maken waar de bezoeker mee te maken heeft.

 

Daarnaast mist de beginpagina een eye-catcher: je gaat er nu vanuit dat mensen altijd wel even willen bladeren in je aanbod. Het gros komt echter bij toeval of via een link op je website: die blijft alleen hangen als ze ergens naartoe geleid wordt. Die gaat niet rustig rondkijken en een paar stappen doorlopen.

 

Daarnaast: naast het product, wil een potentiële koper ook de aanbieder leren kennen. Maar wie is de aanbieder? Is die Duits ("AutoBahn Model Cars") of Engels (de taal van de website)? Nee, die is Nederlands: maar waar zie ik dat, en hoe kom ik wat meer over jouw bedrijf te weten?

 

Je uitgangspunt is goed maar de uitwerking kan echt beter. Ik raad je aan om er een professionele webdesigner op te zetten, dat betaalt zich hoe dan ook uit.

[TimPaymans]

Ook voor een minimalistische UI zou ik een echte designer in de arm nemen. Je kunt dan je eigen ideeën mbt. interactie en schermindeling laten vertalen in een strak ontwerp. Tevens moet je bij het verzinnen van nieuwe interactiemodellen goed opletten voor principes die bij gebruikers 'over-learned' zijn: Principes die al jaren worden toegepast in veel websites (gebruikers zijn er aan gewend en verwachten daarom bepaald gedrag) maar die niet persé de beste oplossing zijn. De meeste HL'ers zullen hiermee in aanraking zijn geweest bij de overschakeling van Office 2003 naar Office 2007 (Office 2003 suboptimaal, maar we werken er wel razendsnel mee, Office 2007: veel betere UI, maar we moeten eerst oude/slechte gewoontes afleren).....

 

Concluderend: 1) Minimalistisch is uitstekend, maar geen alternatief voor een echte designer, 2) Let op bij het invoeren van 'nieuwe' interactie modellen.

[Jeroen Bakker]

Bij minimalistisch design geldt absoluut de quote van Blaise Pascal: "Het spijt me dat dit zo'n lange brief is geworden, ik had geen tijd een korte te schrijven."

[Anoniem9876]

 

Concluderend: 1) Minimalistisch is uitstekend, maar geen alternatief voor een echte designer, 2) Let op bij het invoeren van 'nieuwe' interactie modellen.

 

Volgens mij zou dat juist een uitdaging moeten zijn voor een designer.

[dave lorrez]

Een prachtig voorbeeld van een 'cleane' webshop is deze hier http://www.archiduchesse.com

[Roel J]

na alle tips, adviezen en meningen ben ik dan wel weer benieuwd naar een reactie van Henri.. of ben je ook qua berichten overgestapt op een minimalistisch model ;D

[TwaBla]

 

prachtig. vin-m nogal duits qua design, maar dat is de bedoeling gezien de naam - beetje bauhaus. zou overwegen de onderkast ipv kapitalen consequent durchzufuhren. lever je alleen in NL, in Europa of wereldwijd?

[Manon GJ]

Ben het eens met Michel. Het is mooi maar als klant wil ik graag weten waar ik ben, in wat voor shop etc. Veel klanten zullen niet op de homepage binnenkomen dus moet dit op elke pagina meteen duidelijk zijn. Te minimalistisch neemt ook het vertrouwen weg naar mijn idee.

En moeten zoeken nr belangrijke dingen zoals bijvoorbeeld Contact vind ik zelf als klant altijd erg irritant. Ik zou de belangrijkste dingen wel laten zien.

[Henri Kroeze]

Bedankt allemaal! Ik heb het topic even 'op z'n beloop' gelaten om te kijken welke kant het op zou gaan.

De initiele vraag was jullie mening over 'een' minimalistische webshop interface: kan dat werken of niet? Ik heb voldoende reacties ontvangen om hierin door te gaan (was dat niet het geval geweest, deed ik het waarschijnlijk toch)

 

De opmerkingen over het ontwerp op zich: prima, maar

1) ik ben geen designer

2) in Powerpoint kun je geen website ontwerpen (drama met font grootte en schermresoluties)

3) het was puur als voorbeeld bedoeld om mijn eigen gedachten te kunnen ordenen

 

De originele PPT bevat nog een aantal slides meer, die heb ik er bewust uitgehaald. Pagina's met algemene informatie, login scherm, account overzicht, winkelwagen scherm, etc.

Slide 2 en 3 zijn nog niet het sterkste punt, daar ben ik het mee eens.

 

Leuk zijn de reacties met (de vraag naar) aanvullende informatie, al zou dit een echte webwinkel zijn. Dit betekent dat het ontwerp op zich al gezien wordt als webwinkel!

 

Nog even wat meer achtergrond info:

De winkel gaat heel sterk leunen om een (Nederlands) merk, top of the line en exclusief (kleine oplages).

Doelgroep is voornamelijk Amerika en Azie, vandaar de naam (AutoBahn = Duits/Europees, dus goed).

 

Dan de opmerkingen over 'wat/wie zit er nou achter?" Hiervoor ben ik aan het nadenken. Ik wil dit niet op de traditionele manier doen, maar hiervoor sociale media gaan gebruiken. Ik ben al begonnen op Flickr en Facebook moet er ook maar aan geloven. Feedback van eBay is ook mooi om hiervoor te gebruiken. Daarnaast nog e.e.a. op Twitter. Hoe ik dit allemaal precies in het vat ga gieten, ben ik nog niet helemaal uit.

 

 

[Henri Kroeze]

 

prachtig. vin-m nogal duits qua design, maar dat is de bedoeling gezien de naam - beetje bauhaus. zou overwegen de onderkast ipv kapitalen consequent durchzufuhren. lever je alleen in NL, in Europa of wereldwijd?

Daar heb ik idd een zwak voor! Levering wereldwijd, nadruk op USA/Azie (Japan/Hong Kong etc)

 

Een van de doelstellingen is de klanten die nu consequent via eBay kopen in deze winkel te krijgen. eBay is leuk, maar duur en tijdrovend.

[TwaBla]

Toen er uit Amerika ineens allerlei nieuwe businessbladen kwamen overwaaien zoals Wired, Fast Company en Business 2.0 maakten ze in Duitsland geen kopieën maar hun eigen versie: Econy dat later BrandEins werd. Uiteraard geschreven in onderkast en totaal wars van grafische franje. Bij Apple zijn ze ook al heel lang van die school, en Google trouwens ook. Total minimal!

[Anoniem9876]

Total minimal! in de USA zou ik ook durven maar in Azië weet ik het zo nog niet... Die "denken" anders. Hou de mogelijkheid open voor meerdere templates (of sites) per taal of land.

[Henri Kroeze]

Hmm, daar zeg je wat over Azie. Had ik nog niet aan gedacht, maar je hebt wel gelijk. Alhoewel daar wel steeds meer minder drukke sites opduiken. Als het past bij je producten en doelgroep, zie ik nog niet zo het probleem.

[Anoniem9876]

Hmm, daar zeg je wat over Azie. Had ik nog niet aan gedacht, maar je hebt wel gelijk. Alhoewel daar wel steeds meer minder drukke sites opduiken. Als het past bij je producten en doelgroep, zie ik nog niet zo het probleem.

 

Het kan werken maar hou je er al rekening mee met de bouw dan kun je per land testen. In Azie zijn ze erg gevoelig voor "vertrouwen" Dus daar zul je toch meer moeten doen met visualiseren (BV mogelijkheid van betalen)

 

Succes