Designing for small screens : mobile phones, smart phones, PDAs, pocket PCs, navigation systems, MP3 players, game consoles

178 Pages·2005·38.843 MB·English

by  Studio 7.5 (Firm)

maste -cover UK_4C 9/13/05 10:48 AM Page 1
5th proof
s studio 7.5
t
u
Studio7.5 is an international, operating d Other titles in the AVA Academia imprint
design team located in Berlin, Germany. Its i include:
o
design work covers a range of media – from
7
product design to communication design. Basics Design: Colour
.
5
The team working on this book were: Basics Design: Format
Basics Design: Image
Professor Carola Zwick; born in 1966, The design of interactive applications or presentations on small- Basics Design: Layout
Carola Zwick went on to study at the screen devices presents a constantly evolving challenge for the Basics Design: Typography
University of Arts Berlin where she gained designer. Not all design concepts that are valid on larger screens D
an MA in Industrial Design. In 1993 she can be successfully implemented on smaller screens. e The Fundamentals of Animation
joined the teaching body at the University of s The Fundamentals of Creative Design
i
Arts Berlin as an Assistant Professor and The category of small-screen devices covers a multitude of g The Fundamentals of Illustration
together with Burkhard Schmitz, she initiated hardware; all with very dissimilar technical specifications, n The Fundamentals of Photography
the media group ID5 within the design modes of user interaction, and various levels of performance in
course. Professor Zwick has been teaching and functionality. g Drip-dry Shirts: The Evolution of the
interface design at the University of Applied Graphic Designer
f
Sciences Magdeburg-Stendal since 1998. This invaluable book equips the student or practitioner with the o Grids for the Dynamic Image
appropriate tools and principles that will enable the development r Systematic/Subjective Colour Selection

Professor Burkhard Schmitz; born in 1957, of functional concepts, and the creation of effective and intuitive S Visual Communication
Burkhard Schmitz studied at the University designs for a variety of small-screen devices. m Visual Research
of Arts in Berlin where he too gained an MA a Visible Signs
in Industrial Design. In 1989 he became To simplify and visualise a number of complex issues, each of the l
l
Professor for Media Design at the University nine chapters in this book is split into three distinct sections. Designing for
S
of Applied Sciences Schwäbisch-Gmünd, These three sections are dedicated to the theorectical, practical c Small Screens
returning once more to the University of Arts and supplementary principles and techniques of the issue in r
e
Berlin in 1993 where he has taught question and, when combined, form a solid basis from which
e
Interactive Systems since. informed design decisions can be made.
n
s
Kerstin Kühl; born in 1977, Kerstin Kühl
went on to study at the University of Applied Mobile phones | Smart phones
Sciences Dessau where she gained her
diploma in Graphic Design. PDAs | Pocket PCs

Navigation systems
MP3 players
Game consoles
ava publishing sa
[email protected]
www.avabooks.ch
£17.95
UK Edn Designing for Small Screens
CW905-25 / 3173
mmaasstteerr--iinnttrroo__ 72/92/88//0250 0 52 : 189: 1A9M P MP a gPea g1e 1
52tnhd pprrooooff
studio 7.5
Designing for
Small Screens
Mobile Phones | Smart Phones
PDAs | Pocket PCs

Navigation Systems
MP3 Players
Game Consoles
AVA Publishing SA
Switzerland
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW780055--113322 // 33117533
mmaasstteerr--iinnttrroo__ 77//2289//0055 1112::5081 PAMM PPaaggee 22
22sstt pprrooooff

000022||000033
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW770055--113322 // 33117733
mmaasstteerr--iinnttrroo__ 78//2186//0055 141::4588 PPMM PPaaggee 33
32rsdt pprrooooff
An AVA Book
Published by AVA Publishing SA
Rue des Fontenailles 16
Case postale
1000 Lausanne 6
Switzerland
Tel: [phone]
Email: [email protected]
Distributed by Thames & Hudson (ex-North America)
181a High Holborn
London WC1V 7QX
United Kingdom
Tel: [phone]
Fax: [phone]
Email: [email protected]
www.thamesandhudson.com
For distribution in the USA and Canada please contact:
English Language Support Office
AVAPublishing (UK) Ltd.
Tel: [phone]
Email: [email protected]
Copyright © AVA Publishing SA 2005
All rights reserved. No part of this publication may be reproduced, stored in
a retrieval system or transmitted in any form or by any means, electronic,
mechanical, photocopying, recording or otherwise, without permission of the
copyright holder.
ISBN 2-940373-07-8
10 9 8 7 6 5 4 3 2 1
Design by studio 7.5, Berlin
English translation by Victor Dewsbery, Berlin
Production and separations by AVA Book Production Pte. Ltd., Singapore
Tel: [phone]
Fax: [phone]
Email: [email protected]

DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW780055--13302 / /4 3111753
mmaasstteerr--iinnttrroo__ 77//11//0055 0098::1589 PPaaggee 44
11sstt pprrooooff

000044||000055
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW660055--222299 // 44111155
mmaasstteerr--iinnttrroo__ 77//2299//0055 1122::1022 AAMM PPaaggee 55
22sstt pprrooooff
studio 7.5
Designing for
Small Screens
Mobile Phones | Smart Phones
PDAs | Pocket PCs

Navigation Systems
MP3 Players
Game Consoles
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW770055--113322 // 33117733
mmaasstteerr--iinnttrroo__ 77//2288//0055 55::4478 PPMM PPaaggee 66
22nndd pprrooooff
How to get the most
out of this book 010|011
Introduction 012|013
A
Chapter 1 014|027 Visual Timeline: The Implementation of Miniaturisation 014
Small is Beautiful
Chapter 2 028|047 Particularities of Small Screens 030
Techniques to Increase the Screen Surface Area 030
The Screen How to Divide the Screen 037
Chapter 3 048|073 Physical Interaction 050
Interaction Techniques and Elements 052
Physical Interaction Instant Feedback 060
Natural Mapping: The Position of Control Elements 061
Natural Mapping: The Movement of the Control Elements 062
Motor Memory 063

Chapter 4 074|093 The Mental Model 076
Context 078
Large Structures on Small Screens Analogue and Digital 079
Organising Information 080
Location 082
Alphabetical Order 084
Time Sequence 084
Category 085
Hierarchy 085
Shallow Hierarchies 086
Steep Hierarchies 087
006|007
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW770055--113322 // 44111155
mmaasstteerr--iinnttrroo__ 77//2288//0055 55::4478 PPMM PPaaggee 77
22nndd pprrooooff
B C
Moore’s Law 024
Glossary of Related Terms 025
Battery Technologies 026
Scaling Down Websites and Applications 038 Screen Resolution and Display Sizes 042
Dynamic Organisation of Space 040 Glossary of Related Terms 043
Screen Sizes 044
Display Technologies 046
User-friendly Soft Key Designs 064 Touchscreen Technologies 072
Text Input Solutions 066 The Essentials of Human Sensory Perception 073
Innovative Interaction Concepts 068
Alternative Forms of Physical Interaction 070

Calendar and Diary Functionality 088 Communication between Hardware and Software 092
Visualising Spatial Information 090
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW770055--113322 // 44111155
mmaasstteerr--iinnttrroo__ 77//2288//0055 55::4478 PPMM PPaaggee 88
22nndd pprrooooff
Chapter 5 094|105 Metaphors 096
Databases 096
The Network on Small Screens Different Output Media 098
Chapter 6 106|115 Entertainment Value 108
Games 108
Entertainment on Small Screens The Logic of Games 108
Moving Image 109
Sound 109
Chapter 7 116|137 Text 118
Icons 124
Digital Hieroglyphs:
Text and Icons on Small Screens
Chapter 8 138|155 Visual Perception and the Small Screen 138
Colour on Small Screens 144
Layout and Colour on
Small Screens
Chapter 9 156|169 The Scenario 158
The Paper Computer 158
Developing Designs for The Organisational Diagram 159
Small Screens Simulation 159
Evaluation 159
A
Sources 170|171
Index 172|175
Acknowledgements 176
008|009
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW770055--113322 // 44111155
mmaasstteerr--iinnttrroo__ 79//298//0055 25::2497 PPMM PPaaggee 99
24nthd pprrooooff
Mobile Information and Entertainment Applications 100 Glossary of Related Terms 104
Networking Small-screen Devices 101 The Generations of Mobile Communications 105
Creating New Mobile Service Ideas 102
Creative Editing on Small Screens 110 Gaming Classification Systems 114
The Development of Games and Gaming Techniques 112
Ergonomic Text Display 128 Screen Fonts 134
Designing Effective Icon Alphabets 130 Antialiasing 135
Image Based Communication Techniques 132 ClearType Technology 136
Finetuning Icons for the Screen 136
Glossary of Related Terms 137
Highlighting Methods 148 Additive Colour Mixing 154
Colour for Guidance and Coding 150 Colour Depths 154
Talby Mobile Phone Exemplar 152 The Essentials of Human Colour Perception 155
The Paper Computer and other Simulation Techniques 160 Development Tools 168
Marwell Zoo Exemplar 162 Webography 169
Audi AG Exemplar 164

B C
DDeessiiggnniinngg ffoorr SSmmaallll SSccrreeeennss
CCWW790055--11382 / /4 4111155