Define & design apps for success en

Goal : The tools you can use to make a mock-up design for mobile
apps you are creating

-aCrm net is an Italian company, specialized in CRM open source
Development and DWH Development, Graphic Design, Website Design and
Development, Mobile Design and Development.
- 50+ employees, different nationalities, several competencies and job profiles.
Contact Acrm net
Via Enrico Berlinguer, 18 (00054)
Fiumicino (Roma) Italia
www.acrmnet.com
info_net@acrmnet.it
Phone +39 06 95214464
Fax +39 06 92913681
Our APPS
HERMES HEALTY SPIECES PET ISLAND SWAP ISLAND MORE OR LESS NAPOMEMO

• Your phone is a now a computer in your pocket
• Your tablet is a second screen when you are watching TV un secondo schermo, il tablet
viene utilizzato in casa per vedere un secondo canale
• Your car now has a centralized infotainment system un sistema/strumento di infotainment
• 54% of all US Americans now have a smartphone (IDC)
• 80% cellulare, 68% ha uno smartphone in Italia
• 25% of all Web traffic now comes from a mobile device (Cisco)
• Kids was using apps years before she knew how to use a computer I bambini sanno usare
un’app prima di saper usare un computer
• 25% of your customers arrive at your website on a smartphone. Il 25% delle persone va sul
web da cellulare
• Con uno smertphone è facile acquistare un app
aCrm net : Giugno 2012 Redatto da Francesco Terlizzi: 3

• Because anyone can install an app.
• App usage is successful for three key reasons:
• Vengono downlodate 200 milioni di app al secondo
– One-click install—you don’t need a lawyer to read the legalese anymore
– Natural user interface through touch utilizzo in maniera naturale (human interface)
– Limited screen space, forcing developers to zero in on key functionality ingegnarsi per
evitare di trovare soluzioni al limite del mobile

• App design is very different from desktop design studiare le dimensioni di design per
ogni piattaforma. Il dito è un contatto immediato
• We have a much smaller screen (between 3.5 inches and 5 inches), Considerare la
diversità degli screen, pensate in modo differente in base a tablet e terminale mobile
• Nei tablet si possono usare delle user interface diverse da quelle dei telefonini
• The primary controller is a finger le app sono utilizzate tramite gesture, possono
anche essere inventate gesture custom, specialmente sui tablet che hanno uno
schermo più grande.

• To design mobile app is not
different il design non è diverso
tra mobile e web,
• Use paper and pen to sketch
out designs si usa penna e
matita e disegnata su carta
• Use tools to mock-up designs e
successivamente si usano tool
per portare la carta su schermo
Advantage
• Sketches are cheap to create and provide an immediate
point of view for your customer,
• Sono poco costosi e possono essere presentati al cliente
come prime soluzioni, si possono utilizzare anche degli
stencil
• Sketches immediately explain how app works
• Gli sketches spiegano immediatamente come funziona un
app

• It is much cheaper to go back and forth with a client during the design phase of an
app when the app exists only as an illustration.
• It’s much more expensive to change things when you have hired programmers to
create code.
• There are now thousands of different mobile operating systems.
• Ci sono centinaia di differenti sistemi operativi e risoluzioni, psecialmente di android
• Factors to remember
– Each mobile operating system has its own design guidelines. Ogni Mobile operating system
ha le sue guidelines di design a seguire (google, windows e apple hanno guidelines diverse)
– A smartphone interface is not the same as a desktop interface.
– L’interfaccia di uno smartphone non è quella di un pc desktop
– design your solutions to scale, to different screen perspectives
– Disegnate la vostra soluzione in modo che possa essere scalabile su tutte le differenti
risoluzioni dello schermo

• Real problems with mobile application design are
– EXPERIENCE (UX)
– USER INTERFACE (UI)

• How do you use your iPhone? It is not a silly question.
– The question forces you to think about the user experience, or UX
L’utente Iphone si aspetta sempre la stessa user experience, cambiare la user experience
significa fallire
Un comportamento web non è facilmente replicabile sul mobile
L’utente deve avere feeling sill’uso dell’applicazione
• I use finger to interact with the screen. I will tap, swipe, pinch, and zoom — all
experiences I do in real life.
– The “experience” is why smartphones are so popular

• An iOS app never displays a Close or Quit option
Un applicazione non si deve mai chiudere, va in background non si deve prevedere la modalità quit
• People stop using an app when they switch to another app, return to the Home screen, or put their devices in
sleep mode.
• When people switch away from your app, iOS multitasking transitions it to the background and replaces its UI
with the UI of the new app.
– To prepare this situation your app must :
• Save user data as soon as possible and as often as reasonable
• Save the current state when stopping at the finest level of detail possible
• Non bisogna perdere i dati, quando l’applicazione va in background
• Never quit an iOS app programmatically: it’s interpreted like a crash
• If all app features are unavailable, display a screen that describes the situation and suggests a correction.
• L’applicazione non deve crashare se alcunie features non sono disponibili. Gli alert vanno usati solo in alcuni
momenti senza abusare , gli utenti vogliono il controllo. Dobbiamo far fare sempre all’utente almeno qualcosa
anche se in questo momento le features non sono disponibili
• If only some app features are unavailable, display either a screen or an alert when people try to use the
feature.
• Discorso di login al minimo

• All phones - all mobile devices - are not created equal.
• Today there are three leading mobile operating systems:
– Google’s Android,
– Apple’s iOS,
– Microsoft’s Windows 8. caratteristiche diverse, per esempio la motion, le app wm sono
motion oriented, ci sono immagini e non testo, dovrebbe a breve contaminare anche
Android o IOS
• Each mobile operating system has corresponding hardware.
– Apple has only one physical button on the front of the screen,
– Microsoft leverages tiles in the design,
– Google is moving all physical buttons into the virtual world.

• You need to tailor both UI and UX to the corresponding mobile operating system and
to the hardware it is running on
In base all’hardware prevedere la soluzione ritagliata ad oc
• A correct design approache is : “Well, if it works well on one platform then we will
keep the design the same for all platforms”
• If you use the same design layout for different platform the risk is : TOTAL DISASTER!
• Different Platforms have different UX
• A typical design technique on Android is to keep your menu buttons at the top of the
screen. Menu buttons on iOS app are along the bottom
• Design for the device UI and UX . People who download your app will know the
difference ,
Considerare anche se l’utente è mancino o destrorso, quello che sto pensando per
android va ripensato per ios e ripensato per WP

aCrm net training course
Jan 2014
13
Apple engineers asked themselves when creating the iPhone : How do
you interact with phone?
Apple is a pioneer in HIG

• Qual è il modo migliore con il quale l’utente possa interagire con l’applicazione
• E’ controproducente fare riferimento continuo al brand all’interno dell’app
• “Human interface” is the term Apple uses to describe the experience in designing
software.
• HIG sono un’insieme di regole da seguire
• Apple created a set of guidelines
(https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556)
• It’s absolutely necessary to defer to Apple’s Knowledge
• HIG is a set of instructions that explain of how you should be designing a solution.

Apple’s approach to providing instructions for Human Interface
guidelines is to cover the following key principles that provide for a consistent experience for users of
Apple products:
• Aesthetic integrity : The app must be Beautiful bella da vedere
• Consistency : user experience must be understood immediately by everyone facile da usare
• Direct manipulation : of the screen through touch, swipe, and gestures is built into iOS, le gesture
native vanno utilizzate
• Feedback : is the visual, physical or audible response to an interaction you perform. For a smartphone,
it may be a ringtone when you send a text, open an app, select an icon, or have your phone vibrate
when a call comes in. L’iterazione deve essere immediata, no latenza, performante, utilizzare suoni che
richiamino l’azione che sto facendo, riflettere, quando faccio un tap cosa si deve vedere/sentire
• Vedere i colori utilizzati verde o blu, feedback immediato , vanno eliminate, tutte le forme tranistorie
di tutorial
• Metaphor : in an app is to reproduce real-world actions but as virtual experiences, l’app deve essere
immediata, un applicazione piùù è vincina al mondi reale e più è attraente, quando io tocco o cerco di
entrare devo sentire un audio, quando tocco un oggetto, cosi come quando commetto un errore.
Maneggio, cavalli, briglie.
• User control : control should be placed in the hands of the user . Nobody likes mobile phone working
by itself. Devomo essere posizionati in maniera che l’utente li possa utilizzare facilmente

• Content extend to the edges of the
screen
• All depictions are clear and
immediate
• Questa applicazione è chiara e
immediata, si capisce
immediatamente come funziona
questa app e si estende alle punte
utilizzando tutto lo spazio

• Translucent elements—such as
Control Center—provide
• L’effetto opaco dando evidenza della
sovrapposizione dell’immagine,
quindi come qualcosa di passaggio
che è stato inserito sopra
• context, help users see that more
content is available, and can signal
transience.
• a translucent element blurs only the
content directly behind it—giving the
impression of looking through rice
paper—it doesn’t blur the rest of
thescreen
• L’innovazione va inserita nell’effettuo
wow non nell’utilizzo

• Negative space makes important
content and functionality more
noticeable and easier to understand.
• Evidenziare uno spazio parta il focus
su una detrminata area
diell’applicazione
• Negative space can also impart a
sense of calm and tranquility
• Negatività degli spazi porta anche un
senso di calma e tranquillità
• Negative space can make an app look
more focused and efficient

• A key color—such as yellow in
Notes— highlights important state
and indicates interactivity.
• Il colore (key color) semplifica la UI,
rendono chiaro che sono le
funzionalità
• A key color gives an app a consistent
visual theme
• Introduce una differenziazione
diversa dal contesto

• . iOS 7 system fonts automatically
adjust letter spacing and line height
so that text is easy to read and looks
great at every size
• Whether you use system or custom
fonts, be sure to adopt Dynamic Type
so your app can respond when the
user chooses a different text size.

• In iOS 7, all bar buttons are
borderless.
• Mancanza di bordi nei bottoni però la
chiarezza è evidente perché è nello
standard
• In content areas, a borderless button
uses context, color, and a call-to-
action title to indicate interactivity
• a content-area button can display a
thin border or tinted background that
makes it distinctive.
• VEDERE sempre gli altri o fare
riferimento alle guidelines

• Calendar uses enhanced transitions to
give users a sense of hierarchy and
depth as they move between viewing
years, months, and days.
• Quando pensate alla soluzione fate
riferimento a soluzioni come quelle
utilizzate dal calendar, sono immediate.
• In the scrolling year view shown here,
users can instantly see today’s date and
perform other calendar tasks.
• When users select a month, the year
view zooms in and reveals the month
view. Today’s date remains highlighted
and the year appears in the back
button, so users know exactly where
they are, where they came from, and
how to get back.
• Ogni maschera disegnata in genere ha 3
o 5 revisioni

Jan 2014
23
If you need to provide training on how to use
your app, then you have failed.(regola Apple)

• The display is paramount, regardless of size (aesthetic integrity).
• Device orientation can change.
• Apps respond to gestures, not clicks (direct manipulation).
• People interact with one app at a time (storyboard).
• Onscreen user help is minimal.
• Safari on iOS provides the Web interface.
• If you need to provide training on how to use your
app, then you have failed.

• There are now three distinct screen sizes for iOS devices:
– iPhone (1–4S at 3.5 inches),
– iPhone 5 (4 inches),
– iPad (the iPad Mini is a shrunk-down version of the iPad 2).
Apple has warned that screen sizes can and will change.

• You hold your iPhone in your hand and can shake it around.
• Orientation (Landscape and Portrait) does change.
– Your app can have a fixed orientation or can reflow the design, depending on orientation.
– Per illustrare al cliente

• People spend no more than a minute or two evaluating a new app
• period by presenting useful content is 30 seconds to catch user interest and give him
a superior experience
• Don’t tell people to reboot or restart their devices after installing your app
– Restarting takes time and can make your app seem unreliable and hard to use.
– If your app has memory-usage or other issuesthat make it difficult to run unlessthe system
has just booted
• people won’t have to supply any settings, because the app must already set up to
behave the way they expect
• If you can use any of the information people supply in built-in app or device settings,
query the system for these values; don’t ask people to enter them again
– Store this info in app

• Delay a login requirement for as long as possible.
– It’s best when users can navigate through much of your app and use some of its
functionality without logging in.
– App Store doesn’t ask users to log in until they decide to buy something.
– Users often abandon apps that force them to log in before they can do anything
useful.
• Onboarding Experience: Onboarding introduces an app’s features and explains how
to perform common tasks.)
– Give users only the information they need to get started. Briefly demonstrates a few of the
features that most users are interested in.
– Use animation and interactivity to engage users and help them learn by doing.
• Add text sparingly
• don’t expect users to read long passages
– Make it easy to dismiss or skip the onboarding experience
• launch app in the device’s default orientation

• If possible, avoid requiring users to read a disclaimer or agree to an end-user license
agreement when they first start your app.
• When your app restarts, restore its state so users can continue where they left off.

If only some app features are unavailable,
display either a screen or an alert when
people try to use the feature.
Mettere un messaggio che fa capire che una
caratteristica non è disponibile possono
essere fatte con alert standard o custom

Make it easy for people to interact with
content and controls by giving each
interactive element ample spacing.

to place principal items in the upper half of
the screen and—in left-to-right cultures—
near the left side of the screen:

Large items catch the eye and tend to
appear more important than smaller ones
Alignment tends to make an app look neat
and organized and it gives users places to
focus
users shouldn’t have to scroll horizontally to
read important text, or zoom to see primary
images
Studiare il font da utilizzare, i caratteri grandi
catturano l’attenzione, 44px per la
dimensione dei pulsanti
34
Jan 2014

People can interact with iOS apps in nonlinear ways; give users a way to complete a task or get information
without distractions;
Always provide an obvious and safe way to exit a modal task
35
Reserve alert for
essential information
Respect users’
preferences for
receiving
notifications
Jan 2014

36
Key Colors gives users
a strong visual
indicator of
interactivity especially
in apps that don’t use
an abundance of other
colors.
Utilizzare colori chiave
per una
visualizzazione forre
Jan 2014

An icon or a title that
provides a clear call to
action invites users to
tap it.
“Add Bookmark” and
“Directions to Here,”
clearly describe
actions that users can
take

aCrm net : training course 38
App Store uses a
button border in a
table row to
emphasize the
distinction between
tapping the row to get
more information and
tapping the button to
initiate a purchase.

Avoid unnecessary alerts
An alert is a powerful feedback mechanism, but it should be used only to
deliver important—and ideally actionable—information

Inputting information takes time and attention
When an app slows people down by asking for a
lot of user input before anything useful happens,
people can feel discouraged from using it
Make it easy for users to make choices
use a picker or a table view instead of a text field,
because most people find it easier to select an
item from a list than to type words

41
People don’t want to feel as if they’re being forced
to watch an advertisement.
Be less intrusive
Resist the temptation to display your logo
throughout the app
Jan 2014

42
Color helps indicate interactivity,
Makes app vital, it implies vitality
Provides visual continuity
If you create multiple custom colors, make sure
they work well together
Pay attention to color contrasts in different
contexts : if there’s not enough contrast between
the navigation bar background and the bar-button
titles, the buttons will be hard for users to see
Make bar translucency
Color communicates, but not always in the way
you intend.
Everyone sees color differently
Spend time to research how your use of color
might be perceived in other countries and
cultures

Jan 2014
43
Android is supported on more than 3,000 different devices
43

• Each device has a different specification for
– hardware,
– size,
– screen resolution,
– and many other characteristics.
• To ensure that your solution is built to scale to fit the many different screens
• Google design guidelines : http://developer.android.com/design/index.html
• Google also has its own set of user interface guidelines that Android developers and
designers can use.
44
Jan 2014

• Creative vision . (Do you inspire? ) Android apps are Sleek and Crisp
• Design principles : Android apps are fast and clear
• Style : layout is meaningfull
• Patterns toapply to your design
– include gestures, navigation,
– action bar, widgets, settings,
– and notifications.
• Building Blocks
Your app must combine simplicity, beauty, purpose to create magical experience (google
Andrid) cioè non sei strattamente legato al mondo reale
45
Jan 2014

• Google’s design principles fall very closely in line with Apple’s
• Google encourages you to support human interaction with touch and gestures
• Google also encourages almost limitless personalization (unlike Apple)
• Android is an open-source solution that empowers the developer to extend the
operating system in ways that Apple’s iOS does not.
• People use first time the app, they should intuitively grasp main features
• Make me amazing
46
Jan 2014

the Android OS comes with a set of UI tools you can use as building blocks for your
design. Core building blocks are:
• Tabs, Lists, Grids ,Scrolling
• Spinners, Buttons, Text fields, Seek bars
• Progress and activity Switches
• Dialogs, Pickers
• What is different from Apple’s system, however, is that you can choose to completely
ignore the guidelines and create your own design.
• It is unlikely that Google will ban your app.
• the guidelines are there to make it really easy for your customers to use your app
47
Jan 2014

Jan 2014
48
With Windows 8, Microsoft has, for the first time, outdone Apple in user
experience.
Microsoft creates a smart-phone experience that is not a traditional
Microsoft experience.
48

• A new design metaphor, called Tiles, replaces icons;
• flat images replace detailed icons;
• and a crisp font is used as part of the design (for those who are curious, the font is
Segoe UI).
• The Windows Phone design guidelines are located at this website:
http://dev.windowsphone.com/en-us/design.

• To leverage animation built into the OS to reflect interaction with your app.
• To Use the motion to guide user through the story of app
• To Minimize typing
• Clean design
• Uncluttered design
• Fast and fluid
• More with less
• (logica microsoft)
50
Jan 2014

• Microsoft’s guidelines define the process you need to go through before you write
any code.
• Define your app’s features and focus on the experience; as with Apple, Windows 8 is
a storyboard-driven app experience (no windows for you!!).
• Outline the flow of the storyboard and then apply wireframe designs to each screen
• Then iterate through successive designs until you have a solution you are
comfortable with
• As with iOS and Android, the Windows 8 experience is unique
• You should not take an app that works great on the iPhone and assume it will port to
Windows
51
Jan 2014

Jan 2014
52
Microsoft has an expression: “Speak without words”
52

• Iconography is essential in your mobile design
• the use of text as a symbol
– Think of classic logos such as Nike, IBM, and UPS, which use a font for an image
• Unlike the Web, mobile apps do not restrict you to a fixed set of fonts
• A good font can substitute for an image
53
Jan 2014

• use progressive networks graphic (PNG) for your mobile apps
• It is supported on all mobile platforms,
• allows for transparency and photo-rich colors,
• and is supported on all leading illustration tools.
54
Jan 2014

• there are millions of devices, such as the first-generation iPad Mini, that do not
support high-definition resolution images.
• when you have an image in your app, you do not need to worry about download
time. The app is running from the local device.
• PPI Pixel per inch - DPI Dot per Inch. it’s the same
55
Jan 2014

• Here is a list of leading devices and their PPI:
– Acer Iconia Tab—149 PPI
– Amazon Kindle Fire—169 PPI
– Amazon Kindle Fire HD—216 PPI
– Apple iPhone (4, 4S and 5)—326 PPI
– Apple iPad 2—132 PPI
– Apple iPad Mini—163 PPI
– Apple iPad 3, 4—264 PPI
– HTC Evo—216 PPI
– HTC Touch—245 PPI
– HTC One—468 PPI
– Huawei D2—443 PPI
– LG Optimus LTE—329 PPI
– Motorola Droid RAZR—256 PPI
– Motorola Xoom—149 PPI
– Nokia 820—217 PPI
– Nokia 900—217 PPI
– Samsung S3—306 PPI
– Samsung S4—441 PPI
– Samsung Galaxy Nexus—316 PPI
– Samsung Galaxy Note II—267 PPI
56
Jan 2014

• The first challenge Designer has is deciding on image density, i.e. the number of
pixels per inch.
• Quando si progetta una soluzione deve essere progettata per diversi dispositivi
• The second challenge you have is the massive array of different screen sizes.
57
Jan 2014

Acer Iconia Tab—1280 × 800
Amazon Kindle Fire—1024 × 600
Amazon Kindle Fire HD—1280 × 800
Apple iPhone (4 and 4S)—960 × 640
Apple iPhone 5—1136 × 640
Apple iPad 2—1024 × 640
Apple iPad Mini—1024 × 768
Apple iPad 3, 4—2048 × 1536
HTC Evo—480 × 800
HTC Touch—480 × 800
HTC One—1920–1080
Huawei D2—1920–1080
LG Optimus LTE—720 × 1280
Motorola Droid RAZR—960 × 480
Motorola Xoom—1280 × 800
Nokia 820—800 × 480
Nokia 900—800 × 480
BlackBerry Z10—1280 × 768
Samsung S3—720 × 1280
Samsung S4—1080 × 1920
Samsung Galaxy Nexus—720 × 1280
Samsung Galaxy Note II—720 × 1280
58
You will notice that the vast majority
of devices is Android based
Most of the rest are Apple
A couple of those are Windows and
BlackBerry
Create a solution that can scale to many
different screen sizes is critical in your
design
there are tools to help
Jan 2014

• Evernote is a great example of a digital solution that runs on all desktop
computers, tablets, and phones
• an app with great focus, which is to make it easier to record notes in a meeting
• focus how you use Evernote on each device:
– he Mac OS X and Windows versions of Evernote are styled differently, because users of
those devices work with different
– the iPhone and iPad versions of Evernote are different, as one device has a 3.5- or 4-inch
screen and the other has a 7.8- or a 9.8-inch screen;
– the Android version is also different
59
Use Evernote to tailor an app successfully to
different screen sizes across the different
operating systems
Jan 2014

Jan 2014
60
To design you need to know some essential concepts. Knowing the
names, roles, and capabilities of these basic components helps you make
informed decisions as you design the UI of your app.
Redatto da Francesco Terlizzi: 60

• iOS apps use at least some of the UI
components defined by the UIKit
framework
The UI elements provided by UIKit fall
into four broad categories:
61
Bars contain contextual information that tell
users where they are and controls that help
users navigate or initiate actions.
Content views. Content views contain app-specific
content and can enable behaviors such as scrolling,
insertion, deletion, and rearrangement of items.
Controls. Controls perform actions or
display information.
Temporary views. Temporary views appear
briefly to give users important information or
additional choices and functionality.
Jan 2014

• In addition to UI elements, UIKit defines objects that implement functionality, such as
gesture recognition, drawing, accessibility, and printing support.
• Programmatically, a UI element is considered to be a type of view because it inherits
from UIView.
• A view knows how to draw itself onscreen, and it knows when a user touches within
its bounds
• To manage a set or hierarchy of views in your app, you typically use a view controller.
• A view controller coordinates the display of views, implements the functionality
behind user interactions, and can manage transitions from one screen to another.
62
Jan 2014

Although developers think in terms of views and view controllers, users
tend to experience an iOS app as a collection of screens
63
Jan 2014

Jan 2014
64
Users Know the Standard Gestures
People generally expect gestures to work the same in all the apps they
use
64

65
Jan 2014

66
Jan 2014

67
Jan 2014

68
• Avoid associating different actions
with the standard gestures
• Avoid creating custom gestures that
invoke the same actions as the standard
gestures
• avoid defining new gestures
unless your app is a game
• For tablet, consider using
multifinger gestures
Jan 2014

Define & design apps for success en

More Related Content

What's hot (19)

Viewers also liked (16)

Similar to Define & design apps for success en (20)

Recently uploaded (20)

Define & design apps for success en