Von der Gestaltung to go zur Lust des Navigierens

Von der Gestaltung to go
zur Luﬆ 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 Tablet
Cleverprinting, 2013
Next Generation Publishing
Cleverprinting, 2012
Videotraining, ca. 3 Std.
video2brain, 2014
Videotraining, ca. 3 Std.
video2brain, 2013

User Interface Design Corporate Design Font Design Tablet Publishing
Cogneus Design

pP
Wozu benötigen wir heute noch
Orientierung in den Medien,
obwohl seit Jahrhunderten die
Medienkultur weitergegeben wird?

pP
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

pP„O.K. Siri, wo bin ich ?“

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-Avon
facebook.com/willshakespeare
twitter: @guildenstern
#married
#male
#english
#writer
#actor

Old School: Top down
Quelle: clu, iStockphoto.com

Gent vel et, quidus volescillo quis
molorem corunti busciissit initium
et fuga. Nem voluptu reprae corum
reicimeostasdoluptiaalignatereritis
solorequisquepratepedutquinectur
alisnemvellaccumet,siverspedmoet.
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-
rerenditutofficatioccaborroidel-
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.
S
iorepe 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 PERFEKT
Unterzeilen unterstreichen die Überschrift.
Quelle: Cogneus.com

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.

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-
dentqueomniamerestrumerspidenitquoquas
denimusdae pel et qui nulparis ius eumqui of-

pP
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 offi
Nam 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

pP
Ein ePUB besteht nicht aus Seiten, es
ist mehr ein Code, der auf mehreren
Bildschirmen umbrochen wird.

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.

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
t

pP
Der 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.

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
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
t
Interest

pP
Wie gelingt es, dem Nutzer zu
vermitteln, wo er suchen soll
und welche Informationen
auf ihn warten?

pP
Jeder Mensch besitzt ein
Grundverständnis von Raum.
Richtungen, Bewegungen und
Entfernungen werden erfahren und
als mentale Karte gespeichert.

Quelle: HBK Braunschweig, 2012

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: Lynette Liwanag, Dribble.com Quelle: www.davewrightjr.com

pP
Der User will auf eine
Entdeckungsreise gehen.
Dabei braucht er keine absolute
Sicht auf alle Inhalte.
Sondern subtile Hinweise und
vor allem eins: Überraschungen!

Mit dem iPad von uns gegangen
Hier ruht die
Seite
Sie 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)

pP
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

Von der Gestaltung to go zur Lust des Navigierens

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Von der Gestaltung to go zur Lust des Navigierens