Von der Gestaltung to gozur Lust des Navigierens

oder:

„Sonstige Symptome, die das Erkennungsvermögen und das Bewusstsein betreffen“

Was können wir von der Bedienung digitaler Magazine für E-Books und Books lernen?Christoph Luchs | Cogneus.com, Marburg | Bookmarks 2014, mediencampus, Frankfurt am Main | 28. April 2014

Zur Person: Christoph Luchs � Studium an der Hochschule für

Bildende Künste Braunschweig und der School of Art & Design, Salford, U.K.

� Diplom Grafik-Designer

� Geschäftsführer der Designagentur Cogneus® Design, Braunschweig/Marburg

� Lehrauftrag „Interface Design“ an der HBK Braunschweig von 2008 bis 2012

� Software-Trainer für InDesign seit 1999 u.a. für Adobe, Cleverprinting

� Autor u.a. für Galileo Press, Addison Wesley

� Videotrainings bei video2brain seit 2003 u.a. zu InDesign, Layout und Typografie

� Vorträge und Workshops u.a. für die tgm, Print Cluster Bayern

� verheiratet, zwei Kinder

Publikationen

Publishing für Apple iPad und Android TabletCleverprinting, 2013

Next Generation PublishingCleverprinting, 2012

Videotraining, ca. 3 Std.video2brain, 2014

Videotraining, ca. 3 Std.video2brain, 2013

User Interface Design Corporate Design Font Design Tablet Publishing

Cogneus Design

Fragestellung

p PWozu benötigen wir heute noch

Orientierung in den Medien, obwohl seit Jahrhunderten die

Medienkultur weitergegeben wird?

Orientierung

p P

orientieren: 18. Jhd., entlehnt aus frz. orienter, Ableitung von

frz. orient „Sonnenaufgang“, „Osten“, „Orient“, die Bedeutung

als Verallgemeinerung von:„die Position nach der (aufgehenden)

Sonne bestimmen.“

Friedrich Kluge, Etymologisches Wörterbuch der deutschen Sprache. de Gruyter, 2011, S. 670

p P„O.K. Siri, wo bin ich ?“

Quelle: Nokia.com

Aktuelle Mediennutzung im digitalen Zeitalter

� Das Smartphone ist der wichtigste Begleiter in allen Lebenslagen

� 18 Millionen Deutsche nutzen ein Tablet (jeder vierte ab 14 Jahren)*

� Sprachbefehle oder akustische Analyse (Siri, Shazam,…)

� Instant Publishing (Facebook & Co.)

� Augmented Reality, LiveView etc.

� Metadaten für die Unterscheidung von Informationen

� Tags, Hashtags, Likes, Favourites, Retweets, Posts, Voice Control…

� Die Welt wird (ist) objektorientiert.

Quelle: Bitkom, 02/2014

drama

monarchy

language

loc:Stratford-upon-Avonfacebook.com/willshakespeare

twitter: @guildenstern

#married#male

#english

#writer#actor

Medien

Old School: Top down

Quelle: clu, iStockphoto.com

Quelle: Fotolia.de

Quelle: Cogneus.com

Gent vel et, quidus volescillo quis molorem corunti busciissit initium et fuga. Nem voluptu reprae corum reicim eost as doluptia alignate reritis solore quis que prate ped ut qui nectur alis nem vellaccum et, si versped mo et.

Ommoluptatem quis adicipsumquo occatio.

Nam, quuntor emporibus, audit-at ulpa doluptat od min et que premodit is doluptati ressin et deliquas ullitiis essit eaquuntio. Lorehenient accaborio con-sequi nos ma vid quam, nissu-sa nistius doluptasitia comnitio

berferem. Quam quos expel eos modit, to dolest ad ut re et quam que pore dolorum nulpa dolo-reris molorionet endem con est quati culliae. Udis eles posti oc-caboratis nos erianis et maioria pella ipiet, sinvenis et. Dis nobis ut que perferum fuga. Ut illibus. Int, consene sto-rerendit ut officati occaborro idel-lorrum quas mo odiatum eture et ent aute „Volupturit“ officiu mquiaecearum faccum etur auda natem. Edit mollamende ipis dit ipsapita natias nam, con pel et. Rovit voluptat porerem facerovi-

te sincipsam recus net labo. Ne-quaernam iscia amus voloreper-nam rerat quam, offictem. Ut exerferrovit expla comni quodi cuptat ad molupiciis quam dunt.

Siorepe rnatur autem as et volorehenis „Quis-sinvenim“ id moluptate cor ma prat aut volupti-um etusciuribus sapitat

ioreic te sinciae natquam illen-derro dolescipsum adi ut asse-quas. Solora in perovidunt omnim commolu ptumqui officim inctur re nos int. y

SENSATION PERFEKTUnterzei len unterstre ichen die Ü berschr i f t .

Quelle: Cogneus.com

Responsive Design

iPhone 4/4S — 1.94” x 2.9”

The New iPad/iPad 2 — 5.88” x 7.84”

iPad mini — 4.71” x 6.28”

iPhone 5 — 1.96” x 3.49”

HTC Evo — 3.43” x 6.1”

Kindle Fire HD (8.9) — 4.72” x 7.55”

Samsung Galaxy S3 — 2.35” x 4.18”

Kindle Fire/HD — 3.43” x 6.1”

Nokia Lumina 920 — 2.32” x 3.86”

*Microsoft Surface — 5.2” x 9.24” Google Nexus— 3.71” x 5.94”

Sony Tablet S — 4.98” x 7.97”

Samsung Galaxy Note 10.1/Motorola Xoom — 5.35” x 8.56”

Quelle: Quark.com

Format: liquid.

Quelle: mycelly.com

Textfluss

ficim inctur sequid ullesendiam, inullorpor aut moluptium, videbis ea veliatias volorerunt am, netus, arit la sitia que qui ullecat uribus ullis-sum rernam cus alis id magnatus es ut audam ipsae. Tendae labore pedit mi, quaspienim qui voluptae conserum reicidu ntotaque offici tem et eriat eum nestio minus simporum quas debi-tEllestotate nate volupta et lanis eos eum nis ea aut quis etus magnimagnim debit etur sequunt aut laboriossim non rerum doluptiis enectat la natio cuptatiis remperu ptureped eatur magna-tu repudae pratur?Agnis alicae porum remporeped quisi as sint laut voluptam, quamet, aut quiaspe ritintiunt.Olest, tor aut imoluptatur alitatis ut quo qui re la asin pore nonse id qui am es aces eturio te volores sequas dis doloresequi offic tem delit, offici ium quunt pore aliatem porenturiam aut utae consequ iamendis ationsequis este dolenis cus entis sitas pro maximet occupic imintem conecto estrum, simus, in conserro videlicia vi-deliquis dolupta ant aut doluptate consed min-ciae nonet quibus et iliquibus dolores tibusda ndunda di conet alisint es molecta dolum do-

Acepeliq uibus, et magnihit quosa quas mag-nisqui re seque maximus nobit derunt.Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit ae-cuptis alibusa dolupta tatias peri aut pedis mo-luptatem velene venis veles ent.Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ilicil et adi ad eatessit venem es vero dit aut voluptatet quatem comnim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugi-ae is eossimi litatur si odis mo voluptatem ali-quo magnis rem dolo temo corati nest lab ipi-ci consectur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fugiassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si solla-ta quibusa ntiatum re ipienis reperis doluptas nusdae ipsaerisint hiciis mi, vellige nimillesto eum aliquam ataqui assequi intem. Nonsen-dent que omniame restrum erspidenit quo quas denimusdae pel et qui nulparis ius eumqui of-

ficim inctur sequid ullesendiam, inullorpor aut moluptium, videbis ea veliatias volorerunt am, netus, arit la sitia que qui ullecat uribus ullis-sum rernam cus alis id magnatus es ut audam ipsae. Tendae labore pedit mi, quaspienim qui voluptae conserum reicidu ntotaque offici tem et eriat eum nestio minus simporum quas debi-tEllestotate nate volupta et lanis eos eum nis ea aut quis etus magnimagnim debit etur sequunt aut laboriossim non rerum doluptiis enectat la natio cuptatiis remperu ptureped eatur magna-tu repudae pratur?Agnis alicae porum remporeped quisi as sint laut voluptam, quamet, aut quiaspe ritintiunt.Olest, tor aut imoluptatur alitatis ut quo qui re la asin pore nonse id qui am es aces eturio te volores sequas dis doloresequi offic tem delit, offici ium quunt pore aliatem porenturiam aut utae consequ iamendis ationsequis este dolenis cus entis sitas pro maximet occupic imintem conecto estrum, simus, in conserro videlicia vi-deliquis dolupta ant aut doluptate consed min-ciae nonet quibus et iliquibus dolores tibusda ndunda di conet alisint es molecta dolum do-

Acepeliq uibus, et magnihit quosa quas mag-nisqui re seque maximus nobit derunt.Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit ae-cuptis alibusa dolupta tatias peri aut pedis mo-luptatem velene venis veles ent.Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ilicil et adi ad eatessit venem es vero dit aut voluptatet quatem comnim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugi-ae is eossimi litatur si odis mo voluptatem ali-quo magnis rem dolo temo corati nest lab ipi-ci consectur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fugiassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si solla-ta quibusa ntiatum re ipienis reperis doluptas nusdae ipsaerisint hiciis mi, vellige nimillesto eum aliquam ataqui assequi intem. Nonsen-dent que omniame restrum erspidenit quo quas denimusdae pel et qui nulparis ius eumqui of-

p P

Moderne Medien haben kein einheitlichen Format.

Layouts sind heute „responsiv“, passen sich also an das

Anzeigegerät an.Der Inhalt fließt in die Layoutform.

Acepeliq uibus, et magnihit quosa quas magnisqui re seque maximus nobit derunt.Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit aecuptis alibusa dolupta tatias peri aut pedis moluptatem velene venis veles ent.Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ilicil et adi ad eatessit venem es vero dit aut voluptatet quatem com-nim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugiae is eossimi litatur si odis mo voluptatem aliquo magnis rem dolo temo corati nest lab ipici consectur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fu-giassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si sollata quibusa ntiatum re ipienis reperis doluptas nusdae ipsaerisint hiciis mi, vellige nimillesto eum aliquam ataqui assequi intem. Nonsendent que omniame restrum erspidenit quo quas denimus-dae pel et qui nulparis ius eumqui officim inctur sequid ullesendiam, inullorpor aut moluptium, videbis ea veliatias volorerunt am, netus, arit la sitia que qui ullecat uribus ullissum rernam cus alis id magnatus es ut audam ipsae. Tendae labore pedit mi, quaspienim qui voluptae conserum reicidu ntotaque offici tem et eriat eum nestio minus simporum quas debitEllestotate nate volupta et lanis eos eum nis ea aut quis etus magnimagnim debit etur sequunt aut laboriossim non rerum doluptiis enectat la natio cuptatiis remperu ptureped eatur magnatu repudae pratur?Agnis alicae porum remporeped quisi as sint laut voluptam, quamet, aut quiaspe ritintiunt.Olest, tor aut imoluptatur alitatis ut quo qui re la asin pore nonse id qui am es aces eturio te volores sequas dis doloresequi offic tem delit, offici ium quunt pore aliatem porenturiam aut utae consequ iamendis ationsequis este dolenis cus entis sitas pro maximet occupic imintem conecto estrum, simus, in conserro vi-delicia videliquis dolupta ant aut doluptate consed minciae nonet quibus et iliquibus dolores tibusda ndunda di conet alisint es molecta dolum dolupture, tem abori de maximint, omnimaiora dio blatus maio eostia dollaccum iust, assiminctus re dolut eos eatem iusdand eliquis dolorem volenis eum re asitaturist quatis sequam estem deliquatiis dolo qui non recaerrum abor sit dentum consero qui quatur? Aximi, officat.Idebit illupta ectibus, omni atiam rehenes doluptas ipsunt hilit vene nihil ipsame mosae et facepud animus sedit inciata eatus anitibu scipicim volorro evelesed quid maximenist offiNam ea sed quis sitiaeres ex enihici iscilit, offic tendicium remporitatat quam volorep erumqui offici odiatem corrumqui aut erepell uptatus.Tatiassimo et odi qui que ne nonectibusa serum quidellecum exeria dusciania nimo est reperatistia corit maximus restiumque quasperum fugiatur accusam quas estium audi ad que nisitatque eum quatat esseriti dem utem aut latemquatet aliae. Les andignat excerio ipsae eos raecepere prae et possum a ipient ulpa-rumque nia plab id quos as eum quis doluptatempe exped mos sus, aliquam vendae dolorer sperum volupta tenihil inus.Ignihil molluptam cume rem. Sit doluptae voluptae venti ne dolupta sinverum ut quias rem quam, quas dem. Ut officia soluptas et ditiumque et vellandi bearci-libus esed qui nestiae voluptatatis audit exeribus, incia alignat emquideles as am quam inverrum aut vel mo deratet, omnihit asinihit eaque vel eos nus, cuscid et dolupta periorr ovidel estem qui apis acia quam, cullesero moluptatque volorectem dolupid modiasperati as min reribus repellu ptatem fugias ma nectios soluptamus nobis consecus adi apidem quo blabore perrovid ulparchil int labore et aut ipsunt.Voluptur molore, cum aperchilit, quiam es nonse sus voluptas eium doluptat ex ex eaquiatur rentio tet is ipsunt auta nos audanimin nobitas comnis ea perspe pliquo que nonsequam assi blaccumqui officiis et untentiunda solorro repudipiet estem aspicto tatio. Magnatum ius, sinvelibus mi, unt.Rum quam ra dolorempost laborunt et ipsuntio. Odignam aped min et atem nobis dolorrum volorum derisquam que volorep ernatecum, aut ommolup tatiur sume lam alicias se pre explit, officta tiistio nsecus voluptium non eos none ra voles ma vit ipsapide invelenis apercium consed etus estia cor magnima gnimus parunto ent pro tempor aut qui tent vellest iorias dolor acitibusci corem eum volores tionsequis am voluptatur sapere et eliqui rectotatque litionsequia prese-dicabo. Ectibus et as dolutest odis explisciis minulluptae provid etus, odit liquassi cum labore lacerumquae. Ga. Santem est rem fugit as delestemqui doluptu ribusam, sit quiant ra sent eaquo excessu sdandaero conse estiant, te sunda accum et ea quos et et ad que dolent doluptatur sin pliberchicia arum quis pos et eostem hil imoluptas vernate mporeped quunt.Quia vent. Ta sitiuntur? Qui omnihic itiuntia volendis re pelitas enis pro cum illorerum autest accae nonsera tibusam volore corera dit, sunt ut andigenim sed que as iliqui aut id qui toreici optat.Et ipicita testrum voloreperunt molestior soluptatur sit et ut doles sed quiatest, vent.Icideri buscia qui nossed magnihi llaccus ciisquis venis eseristempor sitassin pore molorem quiaspi squaectiorem qui blaut utempor magnimet eiciisciam utat.Et eatio tem et excestem ipsam, ommodit voluptatum eos verum expe la pro ipsam re velia ente nectam estrumq uatendae qui te sit, omnis qui asitiur asped ul-labo. Icatur, occuptatior autem que consed qui as et estio molum quist facerias dolorem quiamus ipsaest, offic tem harchil laborup tiaeper orehendunt eossunt est, uta venet fugit fugia invendae. Oris acea nobis magnimi, quis volest, sus dolorunt.Dus con ea volorum nest expligenis et iscimus es numqui blabo. Nequatem dolores simagnat pra ipiduci moluptae dellum qui que nobis videbist, nonserrovid modicabore soluptam ipsam quae eosae pro esti odi re pra doluptur? Orestione conserum everio. Andenis rae porrovitatur sapiet autas aut lani to dit latentum facipsum repudae quoditatur reperro beatiunt, nem quas as reserum alit aut utae pror sandit aut eatenti dolendis quas destem eum sinullita quibus natem dis sandestem ut faccupti cus eliquiscim que etus anderfe ruptaqu amenia conseniatur? Reribus eos molupti nitio conseniet audae cones ent optaes volor alicimpor accuptaturia solectur aut magnatque volupti nimolo mo blaut maximiniene pore la nimagnis eum eate none dessit aut maior alignimo imus.

Acepeliq uibus, et magnihit quosa quas mag-nisqui re seque maximus nobit derunt.Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit ae-cuptis alibusa dolupta tatias peri aut pedis mo-luptatem velene venis veles ent.Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ili-cil et adi ad eatessit venem es vero dit aut volup-tatet quatem comnim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugiae is eos-simi litatur si odis mo voluptatem aliquo mag-nis rem dolo temo corati nest lab ipici consec-tur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fugiassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si sollata quibusa ntiatum re ipienis reperis doluptas nusdae ip-saerisint hiciis mi, vellige nimillesto eum ali-quam ataqui assequi intem. Nonsendent que omniame restrum erspidenit quo quas deni-musdae pel et qui nulparis ius eumqui of Ost faccusant, sa voluptatate parum fugiamus.Tias dem quas ducimperis seque sitature por moluptati odio. El il ma dolenim poreculla vo-lupidel invelligeni cuptatempori od erum ut ulpa quis et ilibus mo odigent quia venessimint et quam quatio exceaquature moluptae sus, sin nobit doluptas quiatur, sum fuga. Nem hillo

p PEin ePUB besteht nicht aus Seiten, es ist mehr ein Code, der auf mehreren

Bildschirmen umbrochen wird.

Interaktion

Quelle: mobiletuxedo.com

Lesbarkeit, Interaktion und Usability. � Neben der Typografie, Bildern

und Grafiken bilden interaktive Elemente eine gleichwertige und teilweise übergeordnete Rolle.

� Gestiken und Befehle müssen erlernt werden, das Medium sollte fehlertolerant reagieren.

� Information und Interaktion sollen eindeutig unterscheidbar sein

� Interaktionen sollten gekennzeichnet werden

� Bilderserien, Videos, Animationen, Scrollboxen, PopUps, Hyperlinks,…

� Web-Inhalte können online in einem Medium eingebunden werden.

� Augmented Reality stellt eine hohe Herausforderung für Medium und User dar.

Navigation

Orientierung in einem Print-Magazin

Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview

t

Hyperlink

Hyperlink

Orientierung in einem Print-Magazin

Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview

t

p PDer User betritt ein digitales Medium wie einen Korridor, von dem aus die Türen offen

stehen und in jedem Raum eine Überraschung auf ihn wartet.

Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview

Korridor in einem digitalen Magazin

t

Interest

Alternative

Cover

Animation

Video

Content

Gallery

Chapter 1

HotSpot

Chapter 2

Scrollbox

Realtime 3D

Chapter 3

Video

Advertorial

Chapter 4

Advert

News

Chapter 5 Imprint Preview

Korridor in einem digitalen Magazin

t

Interest

Alternative

Cover

Animation

Video

Content

Gallery

Chapter 1

HotSpot

Chapter 2

Scrollbox

Realtime 3D

Chapter 3

Video

Advertorial

Chapter 4

Advert

News

Chapter 5 Imprint Preview

Website WebsiteContact Form Contact FormNewsletter Shop

Korridor in einem digitalen Magazin

t

Interest

Quelle: Wired App

p PWie gelingt es, dem Nutzer zu vermitteln, wo er suchen soll

und welche Informationen auf ihn warten?

Raum

Quelle: Christoph Luchs

Quelle: Christoph Luchs

p PJeder Mensch besitzt ein

Grundverständnis von Raum.Richtungen, Bewegungen und

Entfernungen werden erfahren und als mentale Karte gespeichert.

Quelle: HBK Braunschweig, 2012

Quelle: HBK Braunschweig, 2012

Methodik

Arbeitsschritte zur Gestaltung von Bedienoberflächen

� Personas: Zielgruppen in konkrete Charaktere formulieren

� MoodBoards: Stimmungen einfangen

� Storyboard: Wesentliche Schritte skizzieren

� FlowChart: Prozesse sichtbar machen

� Screenlayout: Informationen fest oder flexibel verorten

� Screendesign: Pixelgenaue Gestaltung

� Interaktion: Ergänzung der statischen Seiten mit Multimedia-Elementen

Quelle: HBK Braunschweig, 2012

Quelle: Lynette Liwanag, Dribble.com Quelle: www.davewrightjr.com

Lust

p P

Der User will auf eine Entdeckungsreise gehen.

Dabei braucht er keine absolute Sicht auf alle Inhalte.

Sondern subtile Hinweise und vor allem eins: Überraschungen!

Fazit

Mit dem iPad von uns gegangen

Hier ruht die

SeiteSie war uns stets eine feste Größe: geduldig,

anpassungsfähig und nicht nachtragend.

Die Bleisetzung findet im engsten Familienkreis statt.

Orientierungsstörung und Desorientiertheit

Orientierungsstörungen finden sich […] im Zusammenhang mit Bewusstseinsstörungen,

Gedächtnisstörungen, Psychosen,organischem Psychosyndrom, Demenz oder Wahrnehmungsstörungen.

(ICD-10-Code R41 - Sonstige Symptome, die das Erkennungsvermögen und das Bewusstsein betreffen).

Quelle: http://de.wikipedia.org/wiki/Orientierung_(mental)

p P

Methoden für die Gestaltung von digitalen Medien

� Digitale Medien müssen auch als digital begriffen werden: Non-linear, dynamisch, flüchtig

� Grundregeln der Typografie und Bildgestaltung gelten auch für die nächsten Jahrhunderte

� Das einfache Kopieren von Print-Medien auf digitale Geräte ist zwar (fast) umsonst, aber erfolglos

� Responsives Layout wird zur Kernaufgabe in der Herstellung von digitalen Magazinen

� Die Konzentration auf das Erzählen der Inhalte führt zu neuen Layouts

� Balance aus Orientierung und Entdeckungslust

� Leserinteresse und -verhalten mithilfe von Personas formulieren

� Layout über WireFrames festlegen

� Prototyping mithilfe von WebTools wie Balsamiq oder Themes (CMS)

� Die digitale Qualität eines Mediums bildet sich erst heraus

Danke.luchs@cogneus.com