Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011

transcript

TAdam J. Sporka

Návrh uživatelského rozhraní

Winter 2010/2011

YPOGRAPHY

NUR 2010

Typography

An art and technique– Arranging type into text and meta-

text graphic compositions– Design of the type glyphs

Important wherever text is a part of the user interface

Impact on:– Readability, accessibility, usability– Aesthetic feel– Expectations

http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

NUR 2010

Typography

Micro-typography– Typefaces, fonts– Spacing, leading, …

Macro-typography– Overall text-structure– Information architecture

NUR 2010

Some Examples

http://www.typomaps.net/ http://www.axismaps.com http://www.hrubasy.cz

FONTS AND TYPEFACES

NUR 2010

Basic terminology

Typeface (font family)– One or more fonts– Stylistic unity

• Fonts vary in weight, width, etc. but not in design

Font– Coordinated set of glyphs– Covering a character set

Glyph– Individual mark on a written

medium– Contributes to meaning what

was written

Grapheme– Linguistic term– Written element of a

language– Letter, sign, punctuation, …

NUR 2010

Font Categories

Numerous classifications– By features

• Serif fonts, Sans serif fonts, Display fonts, …

– By age• Black letter (gothic script; cca. 1150 – 1800s)

• Dynamic antique (18th century)

• Transitional antique

• …

Type Classification e-book– Jacob Cass, http://justcreativedesign.com

NUR 2010

Serif Fonts

“Extra strokes coming of the letters.” Suitable for printed material

Examples:

– Times New Roman

– Georgia– Garamond

NUR 2010

Times Roman (Times New Roman)

1931 Cameron Latham (Monotype Corp., US) Commissioned by The Times newspaper (UK) One of the most ubiquitous typefaces in history

Times New Roman “more funny” than Arial– Juni, S., Gross, J.S. Emotional and persuasive perception of

fonts. Percept Mot Skills. 2008 Feb;106(1):35-42.– Higher power of satirical text, when set in Times New Roman

as opposed to Arial.

NUR 2010

Sans Serif Fonts

Arial, Helvetica, Droid Sans Serif, Univers

Smaller resolution needed– Display fonts– Fine print

Do not guide the eye as well– “20 % less efficient”– Need more leading (spaces between lines)

NUR 2010

Helvetica

Sans serif font Max Miedinger and Eduard Hoffmann, 1957 Considered very legible Expensive Common usage

– Public signage (NY Subway)– Artifacts in modern design

How to tell apart Helvetica and Arial:– http://www.ilovetypography.com/2007/10/06/arial-versus-helvetica/

NUR 2010

DISPLAY FONTS Examples

Goals– To attract– To deliver a message “this is different”– Very often abused

NUR 2010

Typography Sets Expectations

NUR 2010

Typography Sets Expectations

“Modern fonts. Modern typography. This is new, this is current.”

“They were using this font in 1990s. That can’t possibly work today.”

“Ah, this seems like a console app. I will probably not be able to use the mouse.”

WHAT’S YOUR BUSINESS, STRANGER?

NUR 2010

Nokia Font

By Eric Spiekermann

Used universallyfor all text communication

http://pingmag.jp/2005/10/31/erik-spiekermann-typography-and-design-today/

NUR 2010

Anatomy of Type

Good overview of terminology here:– Font Anatomy Wallpaper– http://font.is/?p=1268

Technology

NUR 2010

Bit Map Fonts

Individual characters defined by bit maps Typesetting = arranging bit maps into a larger

bitmap Resolution

– Typically 1-bit– Color bitmaps on entertainment-oriented devices

Fast to render Impossible (or difficult) to scale

NUR 2010

Bit Map Fonts

http://growboxbox.org/doku.php/lcd

http://mobilefonts.sourceforge.net/

NUR 2010

Fonts on Vintage Computers and Terminals

Typically mono-spaced

http://www.spicypixel.net/2008/01/16/fontpack-royalty-free-bitmap-fonts/

NUR 2010

Outline Fonts

Geometric description– Boundaries of the glyphs– Typically represented as lines or curves

Typical pipeline

Curves > Rasterization > Bitmap Display

NUR 2010

TrueType

Late 1980s, Apple computer Geometric description

– Quadratic Bézier splines

Explicit bitmaps– How different sizes should be

rendered at the pixel level– Not always followed

http://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg

NUR 2010

Hinting language

Problem:– Features of the font are

often below resolution of the target bit map

Solution:– Prescription defining

how control points should be modified

– Virtual machinehttp://commons.wikimedia.org/wiki/File:Font-hinting-example.png

http://spectrum.ieee.org/computing/software/the-technology-of-text

NUR 2010

Sub-pixel Rendering

Sub-pixels of common LCD screens:

Anti-aliasing vs Sub-pixelrendering:

Font rendering:

Human sight: Horizontal resolution is higher than vertical resolution

http://en.wikipedia.org/wiki/File:Antialias-vrs-Cromapixel.png

http://en.wikipedia.org/wiki/File:ClearTypePixels.svg

NUR 2010

Constrained Typography

Single-purpose devices– Vending machines– Public transit information systems

Limited display technology – Segment fonts– LED matrix fonts, …

http://www.aegmis.de/PRODUKTE/GEAVISIONELEMENTS/SEGMENT/tabid/587/language/en-US/Default.aspx

NUR 2010

Bit Map Nokia Font Requirements:

– Legible– Immediately recognizable

Contrast:– Vertical stress, two pixels – One pixel across

The vector font inspired by the bit map font– Squareish bit maps

http://pingmag.jp/2005/10/31/erik-spiekermann-typography-and-design-today/

NUR 2010

http://adam.sporka.eu/wiki/doku.php?id=web:for_fun#segment_display_layout

INTERNATIONAL TYPOGRAPHY

NUR 2010

Background

Internationalization– Still a problem, even with the UNICODE– Fonts often do not cover all languages

• See language list in http://en.wikipedia.org/wiki/Human

– Fall-back to default fonts

Translation of a resource is not enough– Different rules of typesetting– Including direction of writing

NUR 2010

Background

Alphabet itself sets the mood and expectations

NUR 2010

Non-Latin Alphabets

Greek, Cyrillic– Individual letters

Arabic, Hebrew– No lower/upper case distinction – Right-to-left direction

NUR 2010

Non-Latin Alphabets

CJK fonts (Chinese, Japanese, Korean)– 100,000s of characters– Not that many fonts generally available (very expensive

to develop)– Almost non-proportional

NUR 2010

How Do Different Alphabets Blend?

Ut cursus, magna id consequat, ipsum urna blandit metus, viverra egestas sem augue nec metus. То заплачет, как дитя. Etiam viverra tellus commodo orci laoreet sed tempus lectus pellentesque.

Ut cursus, magna id consequat, ipsum urna blandit metus, viverra egestas sem. То заплачет, как дитя. Etiam viverra tellus commodo orci laoreet sed tempus lectus pellentesque.

NUR 2010

Less specific shapes More flexible

More specific shapes Less flexible

ABCDWXYZ

abcdwxyz

αβγδφχψω

АБВГЖЭЮЯ

ΑΒΓΔΦΧΨΩ

абвгжэюя

בדזמנקל

على الله علم هو

სტანდარტული

उसका� हो�ना�

第二次大戦後は

座著名的旅游城市

NUR 2010

Transport for London in English:– http://www.tfl.gov.uk/home.aspx

… Arabic:– http://www.tfl.gov.uk/tfl/languages/arabic/

… Gujarati:– http://www.tfl.gov.uk/tfl/languages/gujarati/

NUR 2010

Alphabet Design

NUR 2010

Alphabet Design

Typography in UI Design

NUR 2010

Performance, Legibility, Fatigue– Sans Serif fonts said to be 20 – 30 % slower to read– Low vs. high contrast

Genre, style– Expectations– Formal? Casual?– Traditional? Progressive?

Brand– A font (or their combination) establishes an identity

NUR 2010

Visual design constrained by the platform

Modern platforms often define ways how to format the text– Mac OS X– MS Windows– Android

All applications should follow the same philosophy– Things can go wrong, but not as much…

NUR 2010

Where are we NOT as constrained?– Computer games– Multimedia– Web pages

Design choices:– Selection of fonts– Screen layouts

NUR 2010

Example: Trustworthiness

Your messagehas been delivered.

NUR 2010

Example: Severity

THE AUTODESTRUCTIONSEQUENCE HAS BEEN

ACTIVATED

THE AUTODESTRUCTIONSEQUENCE HAS BEEN

ACTIVATED

NUR 2010

Example: MySpace Widgets

http://www.easymyspace.com

NUR 2010

General Typographic Rules

Know why you use the font(s) you use– Watch out for combinations of fonts of similar

types– Choose fonts that differ more

Maintain a beat

Horizontal Motion Vertical Motion

NUR 2010

Web Page Typography: Horizontal Motion

Alignment– Left alignment prevalent (Western texts)– Justified paragraphs start appearing

Word Space– Single word spaces between sentences recommended– Elastic (for justified paragraphs)– Fixed (left-align, right-align)

Letter-spacing– Decreases legibility,

e s p e c i a l l y f o r l o w e r c a s e l e t t e r s

NUR 2010

Web Page Typography: Horizontal Motion

Kerning

Stretching the space– Be careful!– Can’t leap too much!

http://webtypography.net/toc/

NUR 2010

Web Page Typography: Vertical Motion

Maintain beat and phasein line spacing

How much real estate do we have?– Cell phone screen? Use it up as much as possible– 24” screen? Can afford some white space

http://webtypography.net/toc/

NUR 2010

Web Page Typography: Font Size

Maintain a “rhythm” in choosing the font sizes

Choose the font size wisely– Use relative sizes (as opposed to absolute pixel values)– Larger fonts for the elderly– Smaller fonts for the teenagers (privacy issues)

body { font-size:100%; }h1 { font-size:2.25em; /* 16x2.25=36 */ }h2 { font-size:1.5em; /* 16x1.5=24 */ }h3 { font-size:1.125em; /* 16x1.125=18 */ }h4 { font-size:0.875em; /* 16x0.875=14 */ }p { font-size:0.75em; /* 16x0.75=12 */ }

NUR 2010

Web Page Typography

A tutorial– http://webtypography.net/toc

How a font will look on a screen?– http://webfontspecimen.com/demo/

NUR 2010

International Web Typography

Code level– Do specify the code page– Use UTF-8

CJK: High complexity of characters– “Need more pixels”– Less scalable

一七两乾亹劘龗

NUR 2010

CJK Kerning

White space between characters should be balanced with the white space inside the characters

http://www.lukew.com/ff/entry.asp?111

Česká hladká sazba Jednopísmenná slova „k“, „K“, „v“, „V“, „z“, atd. (kromě „a“)

– Nesmí být na konci řádku. Číselné údaje

– Omezit používání číslic v zápisu přirozené řeči Datum: 24. 11. 201024.11.2010 Tel. čísla: 603 123 456 Čas: 17.35 Cena: 900 Kč € 9,– 9 € Uvozovky a tečky ve větě:

– „Já se vrátím.“– Navštívili jsme „našeho přítele“.

Procenta: 100 % = „sto procent“ 100% = „stoprocentní“ Stupně: –10 °C 10°

Česká hladká sazba

Spojovník (divis; „krátká pomlčka“)– Dělení slov, slovní spojení („česko-německý slovník“)

Pomlčka („dlouhá pomlčka“)– Přestávka v řeči, nedokončená řeč

• „Dej si bacha, nebo – “

– Rozsah hodnot• „bude to trvat 2 – 3 hodiny“

Znaménko mínus– Má mít stejnou šířku jako +– Ne ve všech fontech je pomlčka stejně široká

NUR 2010

Kinetic Typography Examples

Monty Python: “She’s a witch”– http://www.youtube.com/watch?v=lLe4IIuf9Ew

Inglorious Basterds– http://www.youtube.com/watch?v=5i6Jsxt2sRc

Valve – Still Alive – http://www.youtube.com/watch?v=vzecc6ud1Zw – http://www.youtube.com/watch?v=NCt2nZF2nLk

NUR 2010

Future

Increasing screen resolution– Preference for sans serif fonts might change

Increasing capacity of typographic devices– More fonts– Better typesetting– Better standards of the web page typography– Heavier use of kinetic typography

Increasing importance of the brand identification– Again, more fonts (in order to distinguish from others)– Font embedding might become more important

Adam J. Sporka Návrh uživatelského rozhraní Winter 2010 /2011

Documents