[WiP 2D] Ontwerp iPad-boekenapp

[Ulster Seedling]

Een collega van mij is bezig met een boekenserie over Chinese filosofie/wijsheid. Hij heeft de informatie opgedeeld in vijf thema's en over elk thema gaat hij een boek schrijven. Dit is een brede opzet, waardoor niet alle diepgang in deze vijf boeken past. Binnen de vijf thema's zullen dus extra boeken geplaatst worden, deels zelfgeschreven en deels van andere auteurs. De bedoeling is dat al deze boeken in een app te lezen zijn. Naast deze boeken moet in de app een browser komen waarmee de website van het project bekeken kan worden.

We zijn een beetje bezig geweest met het beginscherm van de app, waarin je de boeken ziet staan en boeken kunt kopen en openen om te lezen. Hieruit is inmiddels het volgende ontwerp ontstaan (versie zonder iPad):

Zoals je ziet staan links de vijf thema's, elk met een eigen kleur, symbool en naam. Ook staan hier de website en info. Als je een thema selecteert (zoals in het voorbeeld "Conflicts") opent in het midden een kolom met de boeken van dat thema. Bovenaan staat het 'hoofdboek' - dat ook direct geselecteerd is - en daaronder staan boeken die de gebruiker al gekocht heeft en meer boeken uit de winkel. Rechts zijn tenslotte details van het geselecteerde boek te zien met knoppen om het boek te kopen/lezen/delen. Zie verder nog een extra toelichting.

Wat vinden jullie hiervan? Is het nog te druk, of valt dat mee? Tips en (opbouwende) kritiek hoor ik graag!

Ik zit zelf al met de volgende punten:

De verticale uitlijning vind ik nog niet mooi. Boven en onder het blok content zit eenzelfde marge (20px), maar doordat de statusbalk bovenaan ook zwart is lijkt de marge bovenaan veel groter. Hier moet ik nog even wat op verzinnen. Ook horizontaal vind ik de uitlijning nog niet perfect, doordat "Aanbieder" in de statusbalk veel meer links staat dan de content begint. Ik zal later eens kijken hoe het eruit ziet met een kleinere marge aan alle kanten. Ik denk dat het helemaal weghalen van de marge niet mooi is, vooral bij witte iPads.

Verder moet er later ook een ontwerp komen voor als de iPad verticaal gehouden wordt. Dat kan nog best lastig worden, aangezien de breedte van het scherm nu redelijk 'goed' gebruikt wordt.

[Hahn]

Ik vind het vooral een hele aparte iPad, volgens mij klopt er qua verhoudingen ook weinig van. Is het wel 4:3?

[Ulster Seedling]

Hahn schreef op maandag 11 juni 2012 @ 00:25:
Ik vind het vooral een hele aparte iPad, volgens mij klopt er qua verhoudingen ook weinig van. Is het wel 4:3?

De iPad is een screenshot van de iOS-simulator (voor app-ontwikkelaars). Nu ik eens goed kijk denk ik dat Apple de randen van deze iPad wat kleiner heeft gemaakt. Het scherm daarentegen klopt helemaal en is gewoon 1024*786px. Ik ga even zoeken naar een betere iPad, dat maakt het wat duidelijker!

[CH4OS]

Wellicht kun je wat met deze?

[Ulster Seedling]

Aangepast naar een echte iPad inmiddels

[Tjeemp]

Ben zelf ook regelmatig bezig met design voor iPhone en iPad. Blijft leuk. Heb nog wel een paar puntjes voor je.

- Ik vind het persoonlijk te plat en vierkant voor een iPad app. Nu kan plat prima natuurlijk, zijn hele mooie apps in die vormgevingsstijl gemaakt, maar ook daarbij draait het om oog voor detail.

- Daarnaast is de kleurstelling wat mij betreft ook enigszins een ratje toe. De kleuren van de genres zijn een goed idee, maar ik zou dat beperken tot een detail. Denk hierbij aan alleen een icoontje in die kleur of een lijntje.

- Over de uitlijning waar je over spreekt. In iPad apps is het zo dat je over het algemeen geen marges gebruikt, dus moet je inderdaad zorgen dat de kleuren aan de rand van het scherm het zowel op een zwarte als witte iPad goed doen. Eventueel kun je ook nog een achtergrond er in zetten (die een map vertegenwoordigt oid) en daarbinnen dan wel marges voor de kolommen. Daarnaast is een navigation bar bovenin (waarin de titel of logo van de app staat) een goede afbakening ten opzichte van de status bar.

- Voor portrait mode op de iPad verberg je normaal 1 van de 2 kolommen in een split view. Jij gebruikt 3 kolommen wat dat misschien lastiger maakt. Bekijk ook de user interface guidelines van Apple voor conventies op dit vlak.

- Daarnaast is er vrijwel geen enkele vorm van hiërarchie te ontdekken. Je moet goed kijken om te zien dat de middelste een voortvloeisel is uit de linkerkolom en de rechter uit de middelste. Probeer dit visueel te maken.

- Bovendien horen wat mij betreft de knoppen "website" en "info" niet op hetzelfde niveau als de genres. Verander minimaal het formaat van deze knoppen. Je kunt hiervoor ook 2 iconen naast elkaar zetten oid of een andere positie zoeken.

- De laatste tip, die zowel de eerste tip zou kunnen zijn, is eigenlijk om eerst eens in de materie te duiken van de user interface guidelines en in eerste instantie die richtlijnen te volgen. Zoals met alles is het namelijk zo dat je eerst de regels moet kennen voordat je ze kunt breken (lijkt mij).

[Ulster Seedling]

Tjeemp schreef op dinsdag 12 juni 2012 @ 11:26:
Ben zelf ook regelmatig bezig met design voor iPhone en iPad. Blijft leuk. Heb nog wel een paar puntjes voor je.

- Ik vind het persoonlijk te plat en vierkant voor een iPad app. Nu kan plat prima natuurlijk, zijn hele mooie apps in die vormgevingsstijl gemaakt, maar ook daarbij draait het om oog voor detail.

Ik ben het met je eens dat het nu meer '1980-plat' is dan 'oog-voor-detail-minimalistisch-plat'. Hopelijk is dat aan het einde van dit topic anders

- Daarnaast is de kleurstelling wat mij betreft ook enigszins een ratje toe. De kleuren van de genres zijn een goed idee, maar ik zou dat beperken tot een detail. Denk hierbij aan alleen een icoontje in die kleur of een lijntje.

Nu ik er nog eens naar kijk moet ik je wel gelijk geven ja. Wat vind je, mogen de blokken wel een gekleurde achtergrond hebben (met dan maximaal één kleur tegelijk in beeld), of zouden deze neutraal moeten zijn en moeten de kleuren echt een detail zijn? WP7 ziet er wat mij betreft prima uit met één kleur achtergrond tegelijk. Misschien moet ik dat maar eens gaan proberen.

- Over de uitlijning waar je over spreekt. In iPad apps is het zo dat je over het algemeen geen marges gebruikt, dus moet je inderdaad zorgen dat de kleuren aan de rand van het scherm het zowel op een zwarte als witte iPad goed doen. Eventueel kun je ook nog een achtergrond er in zetten (die een map vertegenwoordigt oid) en daarbinnen dan wel marges voor de kolommen. Daarnaast is een navigation bar bovenin (waarin de titel of logo van de app staat) een goede afbakening ten opzichte van de status bar.

Ik denk dat een navigation bar juist nog meer los van de blokken komt te staan. De blokken blijven immers een beetje 'zwevend', als er nog een 'vaste' balk in beeld is tekst dat nog meer aandacht.

- Voor portrait mode op de iPad verberg je normaal 1 van de 2 kolommen in een split view. Jij gebruikt 3 kolommen wat dat misschien lastiger maakt. Bekijk ook de user interface guidelines van Apple voor conventies op dit vlak.

Ik ben bang dat dat lastig gaat worden met de opbouw waar ik nu voor gekozen heb. Ik ga denk ik eerst proberen om alle kolommen wat smaller te maken, en wat te herstructureren.

- Daarnaast is er vrijwel geen enkele vorm van hiërarchie te ontdekken. Je moet goed kijken om te zien dat de middelste een voortvloeisel is uit de linkerkolom en de rechter uit de middelste. Probeer dit visueel te maken.

Ik vermoed dat dit wel blijkt uit de werking/animaties. In eerste instantie zul je enkel de eerste kolom zien, wanneer je op een thema tapt verschijnen de andere kolommen ook. Je hebt wel gelijk dat dit goed duidelijk moet worden, dus daar moet ik later nog wel even op letten.

- Bovendien horen wat mij betreft de knoppen "website" en "info" niet op hetzelfde niveau als de genres. Verander minimaal het formaat van deze knoppen. Je kunt hiervoor ook 2 iconen naast elkaar zetten oid of een andere positie zoeken.

De website hoort wat mij betreft wel op hetzelfde niveau. Hier zal immers ook kennis worden aangeboden wat bij het onderwerp van de app hoort. Misschien kan ik de infoknop wel weglaten, het was sowieso nog niet duidelijk wat hier zou moeten staan.

- De laatste tip, die zowel de eerste tip zou kunnen zijn, is eigenlijk om eerst eens in de materie te duiken van de user interface guidelines en in eerste instantie die richtlijnen te volgen. Zoals met alles is het namelijk zo dat je eerst de regels moet kennen voordat je ze kunt breken (lijkt mij).

Ik ben (redelijk) bekend met Apple's HIG, maar nog niet zo ervaren met iPad-ontwerp. Toch hoop ik dat ik er wat moois van kan maken, want wat jij aandraagt is meer een langetermijnoplossing

---

Oké, ik ben weer even bezig geweest en het ontwerp is aardig veranderd (verbeterd?)



En ook weer een iPad-loze versie. Het volgende is veranderd:

• Marges rondom zijn weg, zoals hoort op de iPad.
• De marges tussen blokjes binnen een kolom is aanzienlijk kleiner geworden. De marge tussen kolommen is een klein beetje kleiner geworden. Hierdoor lijkt het scherm meer uit drie delen te bestaan.
• De infoknop is weggehaald, deze was niet echt nodig.
• De thema en website-knoppen en de verschillende delen in de tweede kolom zijn duidelijker van elkaar gescheiden door een grotere marge.
• Het lettertype is veranderd van Gill Sans naar Helvetica Neue (Light, en Medium voor de knoppen rechts). Gill Sans voelde niet helemaal goed en omdat Helvetica het standaardlettertype in iOS is heb ik er geprobeerd iets moois van te maken op deze manier.
• Het werd mij duidelijk dat het scherm druk was door de verschillende kleuren. Het contrast tussen de kleuren onderling en de zwarte achtergrond was groot, doordat het felle kleuren waren. Ik heb de kleuren veel donkerder gemaakt. Hierdoor is het beeld veel rustiger, maar kunnen we wel de vijf themakleuren blijven gebruiken. Een mooie bijkomstigheid is dat het contrast tussen de tekst en de kleuren een stuk groter is, waardoor de tekst veel beter te lezen is.
• Ik heb een zwarte schaduw aan alle tekst en knoppen toegevoegd. Dit maakt de tekst veel steviger (en dat kon de Light-variant van Helvetica Neue wel gebruiken). Om consistent te blijven heb ik deze schaduw ook op de symbolen toegepast.
• Op verzoek van de opdrachtgever is de naam van de auteur bij de boeken in de tweede kolom weggehaald. Dit maakt het beeld rustiger.

[ Voor 20% gewijzigd door Ulster Seedling op 12-06-2012 21:53 ]

[Savantas]

Ik neem aan dat de linkernavigatie knoppen hebben die inverteren (wat nu wit is wordt de themakleur en de achtergrond juist wit). Nadeel van de huidige opzet is dat je een witte knop hebt (met als klein detail rood) als hoofdonderwerp, terwijl de resulterende pagina's juist weer geinverteerd zijn. Hierdoor is het intuitief net wat minder verbonden met elkaar.
Voor wat betreft de website: Gaat dit naar de homepage? Want mogelijk is het handiger om per onderwerp (tweede kolom) een knop te hebben die naar de betreffende subcategorie van de website gaat. En per boek eventueel een link onderaan de pagina die verwijst naar de website (indien daar meer te melden is dan op de site natuurlijk). Op deze manier is de linkerknop naar de website (vrijwel) overbodig.
Qua kleuren heb je eerst drie relatief dicht naast elkaar liggende aarde kleuren (donkerbruin, lichtbruin en donkerrood) en vervolgens groen en blauw. Ik zou een evenwichtiger verdeling van kleuren kiezen, mits natuurlijk de kleur bijpassend bij het onderwerp is (voor natuur is groen meer gebruikelijk dan bruin, trouwens).

Overigens is de pagina nu iets te somber geworden, naar mijn idee. Iets minder donker lijkt me beter.

[ Voor 4% gewijzigd door Savantas op 13-06-2012 14:08 ]

[Stukfruit]

Ik zou vooral eerst eens een mooi palet gaan uitzoeken zodat je een passend en wat smakelijker kleurschema krijgt. Gebruik daar desnoods hulpmiddelen bij zoals Adobe Kuler.

De rij aan de linkerkant vind ik eigenlijk een beetje verspilling van ruimte. Dat zou je bv. ook bovenaan kunnen doen in (bijvoorbeeld) een smallere balk (of een taartmenu, of whatever, wees creatief!). Heb je gelijk niet meer die drie (verschillende) panelen naast elkaar waardoor het er allemaal wat chaotisch uitziet.

Na lang kijken (en uiteindelijk het lezen van de ts ) ontdekte ik dat de opvallende witte ruimtes "selecties" zijn? Dit is echt heel erg onduidelijk. Je zou hier bv. een nieuw ontwerp voor de weergave van verschillende categorieen kunnen combineren met het tonen van de huidige selectie. Of een "pijl" (indicatie is al genoeg, hoeft niet perse een echte pijl te zijn) vanuit de selectie, of een icoontje erbij zodat het duidelijk is waar het om gaat, enz. Zelf zou ik voor een beter ontwerp van de categorie"balk" gaan omdat het geen mailprogramma is en de onderlinge relaties tussen de content hier niet op het eerste gezicht al duidelijk zijn.

Blokken van verschillende groottes en varieerende witruimtes ertussen maken het in dit geval ook minder aangenaam om naar te kijken omdat het rommelig overkomt.

Afbeelding van het boek hangt er maar wat bij. Dat zou je een stuk beter kunnen regelen met een aparte header oid. Maar dan moet je wel eerst de rest (categorieen, enz) beter maken omdat het anders te druk wordt. Kan je gelijk ook iets doen aan de loze ruimte die je nu bij kortere omschrijvingen hebt, terwijl de tekst en de afbeelding "in elkaar" worden gedrukt.