ios 7 human interface guidelines - pragma conference 2013

ITALY !!

Italiano

Buongiorno

Scusi

Per favore

Grazie

Ciao a doppo

Signori

Donne

Pranzo

testo.. testo..

Dani ArnaoutSystems Engineer - Lextech Global Services (USA)

iOS 7 Human Interface Guidelines

Writer - raywenderlich.com

RayWenderlich.com

My latest tutorial

RayWenderlich.com

SURPRISE!!

212pages

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

per minimizzare problemi tra developers e designers

1. UI 2. UX 3. SDK

Questi sono i tre argomenti principali

UIUser Interface

User interface ..

User experience .. Come la vedi

UXuser experience

UGLY UI BAD UX

Cattiva UI porta ad una brutta UX

5 brutte Apps

5

ugly apps

#5

I colori, i font

#4

I colori

#3

Troppi colori!

#2

Cattivo utilizzo delle immagini

#1

Troppe cose insieme

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

1. UI 2. UX 3. SDK

iOS 7

UI

iOS 7Deference

Clarity

Depth

Weather in iOS 7 Weather in iOS 6

Utilizza tutto lo schermo

Messages in iOS 7 Messages in iOS 6

Design flat

Messages in iOS 7 Messages in iOS 6

Pulsanti senza bordo

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

I. Bars:

I. Bars:

Status Bar

I. Bars:

Navigation Bar

I. Bars:

Tool Bar

I. Bars:

Tool Bar Icons

I. Bars:

Tab Bar

I. Bars:

Tab Bar Icons

I. Bars:

Search Bar

II. Content Views

Activity View

II. Content Views

Collection View

II. Content Views

Table View

II. Content Views

Scroll View

II. Content Views

Map View

II. Content Views

Web View

II. Content Views

Image View Popover View

Page View Controller II. Content Views

III. Controls

III. Controls

Activity Indicator

III. Controls

Date Picker

III. Controls

Picker View

III. Controls

Page Control

III. Controls

Progress Bar

III. Controls

Segmented Control

III. Controls

Slider

III. Controls

Stepper

III. Controls

Switch

III. Controls

Switch

IV. Temporary Views

IV. Temporary Views

Alert View

IV. Temporary Views

Action Bar

IV. Temporary Views

Modal View

V. Icons & Splash Screens

V. Icons &

Splash Screens

V. Icons &

Splash Screens

V. Icons &

Splash Screens

V. Icons &

Splash Screens

1. UI 2. UX 3. SDK

1. UI 2. UX 3. SDK

UXiOS 7

Anti-pattern

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

Who doesn’t understand English?

Who doesn’t understand English?

0%

Who doesn’t understand English?

0%

UX hints..

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

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

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

44x44 pts e’ la dimensione minima per un pulsante

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

Tutti questi sei pulsant

Usa un testo descrittivo per il pulsante di back.

Per differenziare tra testo e pulsant

Start e Pause sono i principali

Non pubblicizzare la tua identita’ cosi’.

Usa i colori di iOS 7.

Supporta il Dynamic Type

Usa solo un font.

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

Utilizza un linguaggio semplice. Evita i tecnicismi.

Avere una buona UI non implica fornire una buona UX.

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

1. UI 2. UX 3. SDK

Case Study: Viber

From iOS 6 to iOS 7

oooo touch 3G 4:17PM 73%

All | Groups

Compose

1. UI 2. UX 3. SDK

SDK

Passbook:

Multitasking:

Social Media:

iCloud:

In-App Purchase:

Game Center:

Notification Center:

iAd Rich Media Ads:

AirPrint:

Location Services:

Sound:

VoiceOver:

1. UI 2. UX 3. SDK

one more thing …

5

Helpful tools

Un utile tool per wire-framing.

Un tool per la generazione di schemi-colore.

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

PaintCode converte la grafica in codice.

Tool per il ridimensionamento delle immagini.

one other thing …

RayWenderlich.com

2 LUCKY WINNERS!!

Per i due fortunati vincitori

Il nuovissimo libro sullo sviluppo iOS: iOS7 by tutorials

1500+ pagine .. 15+ esempi

E’ tutto

Dani Arnaout@dani_arnaout