ios 7 human interface guidelines - pragma conference 2013

147

Upload: dani-arnaout

Post on 23-Jun-2015

837 views

Category:

Documents


0 download

DESCRIPTION

This is the "iOS 7 Human Interface Guidelines" keynote as it was delivered at Pragma Conference 2013 in Milan,Italy.

TRANSCRIPT

Page 1: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 2: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 3: iOS 7 Human Interface Guidelines - Pragma Conference 2013

ITALY !!

Page 4: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 5: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 6: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 7: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 8: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 9: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 10: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 11: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 12: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 13: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 14: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Italiano

Buongiorno

Scusi

Per favore

Grazie

Ciao a doppo

Signori

Donne

Pranzo

Page 15: iOS 7 Human Interface Guidelines - Pragma Conference 2013

testo.. testo..

Page 16: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 17: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Dani ArnaoutSystems Engineer - Lextech Global Services (USA)

iOS 7 Human Interface Guidelines

Writer - raywenderlich.com

Page 18: iOS 7 Human Interface Guidelines - Pragma Conference 2013

RayWenderlich.com

My latest tutorial

Page 19: iOS 7 Human Interface Guidelines - Pragma Conference 2013

RayWenderlich.com

SURPRISE!!

Page 20: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 21: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 22: iOS 7 Human Interface Guidelines - Pragma Conference 2013

212pages

iOS Human Interface Guidelines e’ un documento realizzato da Apple che ha standards & guidelines da seguire quando designing un iPhone/iPad app.

Page 23: iOS 7 Human Interface Guidelines - Pragma Conference 2013

per minimizzare problemi tra developers e designers

Page 24: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Questi sono i tre argomenti principali

Page 25: iOS 7 Human Interface Guidelines - Pragma Conference 2013

UIUser Interface

User interface ..

Page 26: iOS 7 Human Interface Guidelines - Pragma Conference 2013

User experience .. Come la vedi

UXuser experience

Page 27: iOS 7 Human Interface Guidelines - Pragma Conference 2013

UGLY UI BAD UX

Cattiva UI porta ad una brutta UX

Page 28: iOS 7 Human Interface Guidelines - Pragma Conference 2013

5 brutte Apps

5

ugly apps

Page 29: iOS 7 Human Interface Guidelines - Pragma Conference 2013

#5

I colori, i font

Page 30: iOS 7 Human Interface Guidelines - Pragma Conference 2013

#4

I colori

Page 31: iOS 7 Human Interface Guidelines - Pragma Conference 2013

#3

Troppi colori!

Page 32: iOS 7 Human Interface Guidelines - Pragma Conference 2013

#2

Cattivo utilizzo delle immagini

Page 33: iOS 7 Human Interface Guidelines - Pragma Conference 2013

#1

Troppe cose insieme

Page 34: iOS 7 Human Interface Guidelines - Pragma Conference 2013

UI/UXUI/UX da un punto di vista iOS 7

Page 35: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Page 36: iOS 7 Human Interface Guidelines - Pragma Conference 2013

iOS 7

UI

Page 37: iOS 7 Human Interface Guidelines - Pragma Conference 2013

iOS 7Deference

Clarity

Depth

Page 38: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Weather in iOS 7 Weather in iOS 6

Utilizza tutto lo schermo

Page 39: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Messages in iOS 7 Messages in iOS 6

Design flat

Page 40: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Messages in iOS 7 Messages in iOS 6

Pulsanti senza bordo

Page 41: iOS 7 Human Interface Guidelines - Pragma Conference 2013

UI ElementsI. Bars II. Content Views III. Controls IV. Temporary Views V. Icons

Page 42: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Page 43: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Status Bar

Page 44: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Navigation Bar

Page 45: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Tool Bar

Page 46: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Tool Bar Icons

Page 47: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Tab Bar

Page 48: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Tab Bar Icons

Page 49: iOS 7 Human Interface Guidelines - Pragma Conference 2013

I. Bars:

Search Bar

Page 50: iOS 7 Human Interface Guidelines - Pragma Conference 2013

II. Content Views

Page 51: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Activity View

II. Content Views

Page 52: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Collection View

II. Content Views

Page 53: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Table View

II. Content Views

Page 54: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Scroll View

II. Content Views

Page 55: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Map View

II. Content Views

Page 56: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Web View

II. Content Views

Page 57: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Image View Popover View

Page View Controller II. Content Views

Page 58: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Page 59: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Activity Indicator

Page 60: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Date Picker

Page 61: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Picker View

Page 62: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Page Control

Page 63: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Progress Bar

Page 64: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Segmented Control

Page 65: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Slider

Page 66: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Stepper

Page 67: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Switch

Page 68: iOS 7 Human Interface Guidelines - Pragma Conference 2013

III. Controls

Switch

Page 69: iOS 7 Human Interface Guidelines - Pragma Conference 2013

IV. Temporary Views

Page 70: iOS 7 Human Interface Guidelines - Pragma Conference 2013

IV. Temporary Views

Alert View

Page 71: iOS 7 Human Interface Guidelines - Pragma Conference 2013

IV. Temporary Views

Action Bar

Page 72: iOS 7 Human Interface Guidelines - Pragma Conference 2013

IV. Temporary Views

Modal View

Page 73: iOS 7 Human Interface Guidelines - Pragma Conference 2013

V. Icons & Splash Screens

Page 74: iOS 7 Human Interface Guidelines - Pragma Conference 2013

V. Icons &

Splash Screens

Page 75: iOS 7 Human Interface Guidelines - Pragma Conference 2013

V. Icons &

Splash Screens

Page 76: iOS 7 Human Interface Guidelines - Pragma Conference 2013

V. Icons &

Splash Screens

Page 77: iOS 7 Human Interface Guidelines - Pragma Conference 2013

V. Icons &

Splash Screens

Page 78: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 79: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Page 80: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Page 81: iOS 7 Human Interface Guidelines - Pragma Conference 2013

UXiOS 7

Page 82: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Anti-pattern

Anti- Pattern non va bene per UX, ma e’ utile per la persona che lo usa.

Page 83: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 84: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Who doesn’t understand English?

Page 85: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Who doesn’t understand English?

0%

Page 86: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Who doesn’t understand English?

0%

Page 87: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 88: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 89: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 90: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 91: iOS 7 Human Interface Guidelines - Pragma Conference 2013

UX hints..

Page 92: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Non usare una schermata di benvenuto se non ne necessiti veramente. Come in un calculator app.

Page 93: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Comunica all’utente cosa sta andando storto anziche’ mostrare un contenuto vuoto.

Page 94: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Spiega all’utente perche’ vuoi tracciare la sua location.

Page 95: iOS 7 Human Interface Guidelines - Pragma Conference 2013

44x44 pts e’ la dimensione minima per un pulsante

Page 96: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Contenuti importanti dovrebbero essere posizionati nella parte in alto a sinistra.

Page 97: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Tutti questi sei pulsant

Page 98: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Usa un testo descrittivo per il pulsante di back.

Page 99: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Per differenziare tra testo e pulsant

Page 100: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Start e Pause sono i principali

Page 101: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Non pubblicizzare la tua identita’ cosi’.

Page 102: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Usa i colori di iOS 7.

Page 103: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Supporta il Dynamic Type

Page 104: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Usa solo un font.

Page 105: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Accertati che l’icona della tua app sia chiara, semplice ed attraente.

Page 106: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Utilizza un linguaggio semplice. Evita i tecnicismi.

Page 107: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Avere una buona UI non implica fornire una buona UX.

Page 108: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Real life desings aiutano l’utente ad utilizzare l’app senza ulteriori indicazioni.

Page 109: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 110: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Page 111: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Case Study: Viber

From iOS 6 to iOS 7

Page 112: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 113: iOS 7 Human Interface Guidelines - Pragma Conference 2013

oooo touch 3G 4:17PM 73%

All | Groups

Compose

Page 114: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 115: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Page 116: iOS 7 Human Interface Guidelines - Pragma Conference 2013

SDK

Page 117: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Passbook:

Page 118: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Multitasking:

Page 119: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Social Media:

Page 120: iOS 7 Human Interface Guidelines - Pragma Conference 2013

iCloud:

Page 121: iOS 7 Human Interface Guidelines - Pragma Conference 2013

In-App Purchase:

Page 122: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Game Center:

Page 123: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Notification Center:

Page 124: iOS 7 Human Interface Guidelines - Pragma Conference 2013

iAd Rich Media Ads:

Page 125: iOS 7 Human Interface Guidelines - Pragma Conference 2013

AirPrint:

Page 126: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Location Services:

Page 127: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Sound:

Page 128: iOS 7 Human Interface Guidelines - Pragma Conference 2013

VoiceOver:

Page 129: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 130: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1. UI 2. UX 3. SDK

Page 131: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 132: iOS 7 Human Interface Guidelines - Pragma Conference 2013

one more thing …

Page 133: iOS 7 Human Interface Guidelines - Pragma Conference 2013

5

Helpful tools

Page 134: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 135: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Un utile tool per wire-framing.

Page 136: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Un tool per la generazione di schemi-colore.

Page 137: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Questo tool riflettera’ il contenuto del tuo device iOS sullo schermo del tuo Mac.

Page 138: iOS 7 Human Interface Guidelines - Pragma Conference 2013

PaintCode converte la grafica in codice.

Page 139: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Tool per il ridimensionamento delle immagini.

Page 140: iOS 7 Human Interface Guidelines - Pragma Conference 2013
Page 141: iOS 7 Human Interface Guidelines - Pragma Conference 2013

one other thing …

Page 142: iOS 7 Human Interface Guidelines - Pragma Conference 2013

RayWenderlich.com

Page 143: iOS 7 Human Interface Guidelines - Pragma Conference 2013

2 LUCKY WINNERS!!

Per i due fortunati vincitori

Page 144: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Il nuovissimo libro sullo sviluppo iOS: iOS7 by tutorials

Page 145: iOS 7 Human Interface Guidelines - Pragma Conference 2013

1500+ pagine .. 15+ esempi

Page 146: iOS 7 Human Interface Guidelines - Pragma Conference 2013

E’ tutto

Page 147: iOS 7 Human Interface Guidelines - Pragma Conference 2013

Dani Arnaout@dani_arnaout