Mobile Applications and Services FALL 2010

darkfryingpanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

134 εμφανίσεις

Mobile Applications and Services

FALL 2010



-

Create performance by UI/UX Design

Navid Nikaein

Mobile Communication Department



This work is licensed under a CC attribution
Share
-
Alike 3.0 Unported license.

Keywords


User experience, usability engineering, user interface,
accessibility, ergonomics, usability, user
-
centered
design, Interaction design


Context, information architecture,visual design


Message, branding, layout, color palette, graphics,
icon, typography,


kuler.adobe.com

,
smallsurfaces.com/
,
4ourth.com/wiki/



Ref:
http://dret.net/lectures/mobapp
-
spring10/


©Navid Nikaein 2010

-

p
2


MOBILE DESIGN

©Navid Nikaein 2010

-

p
3


Mobile Design


Draw my phone


Draw my phone’s interface (UI)


Draw the experience of using the phone (UX)



Fact1: Users’ expectations and common conventions
are directly translated to
Value

and
Trust


Fact 2: Desktop PC and Web have evolved around
task
-
efficiency

model while Smartphone and mobile
Web are about providing
context
-
aware information

©Navid Nikaein 2010

-

p
4


Establish a Mobile Mindset


Achieve a great performance through appropriate design


Design choices impact application performance


New interaction paradigm (usage pattern in order of few seconds)


Quick use, quick storage


Present useful information quickly


Limited screen real estate


Samsung Galaxy S: 4 inches


iPhone

4 : 3,5 inches


Keep it simple, clear, and precise


Uncluttered, well organized user interface


Address a specific need


Most of built
-
in apps do only one thing


One at a time please


no background applications


Your application quits when the home button is pushed


If your application opens another application

©Navid Nikaein 2010

-

p
5


Establishing a Mobile Mindset : Usage Pattern


Personal handheld device


Identifiable and locatable


Wakable

by user or network


Always on your pocket, always on, always connected


Minimal interaction in the order of few seconds


Minimal attention


Hand
-
free interaction in any situation and position


Changing user context


May modify the social experience both positively and
negatively




©Navid Nikaein 2010

-

p
6


Mobile design challenge


It is often not possible to reuse ideas directly from the
desktop UI world



Small user interfaces do not scale


It is proven that users who have a good mental model of a
menu structure can perform better in using the application


Inventing intuitive and logic mental models is one of the
base challenges in user interface design


Access has to be simple with clear paths for common tasks


Content must be categorized and ordered in some efficient manner


Relevant features have to be selected and prioritized


Feature prioritization requires a very good user understanding

©Navid Nikaein 2010

-

p
7


USER INTERFACE

©Navid Nikaein 2010

-

p
8


User interface


The space where interaction between user and
device/machine occurs


Input: allowing user to manipulate the system


Output: allowing the system to feedback and indicate the
effect of the users' manipulation

©Navid Nikaein 2010

-

p
9


User Interface Type


Interactive Voice Response (IVR) Systems


Text or image based


Mobile Web applications


Native Applications

©Navid Nikaein 2010

-

p
10


Interactive Voice Response


Interact with user through the use of voice or keypad
inputs (phone tree)


More for elderly users


Example


Facebook

Callme



http://www.terasens.com/

©Navid Nikaein 2010

-

p
11


Text or image based UI


Interact with user through text and image


Often used as an entry point


Example :


SMS, MMS, chat


CLI


Use case:


Valuable interface where the data/voice rate are high but
SMS is cheap


©Navid Nikaein 2010

-

p
12


Mobile Web


No modification needed for some devices/sites


No access to native hardware


JavaScript support reduced


Can attempt to replicate native experience


Must design new sites for each device


Hard to do perfectly today


Example


News on Mobile

©Navid Nikaein 2010

-

p
13


Native Application


Access to built‐in hardware and software


Better user experience, some restrictions


Little or No Portability


App Stores Review Process

©Navid Nikaein 2010

-

p
14


Translating to Mobile


Direct translation does not work


Adapt, don’t Miniaturize


Applications should not work the same way in different
contexts


Rethink what is desirable and possible in the mobile
environment


How do tasks and user needs change?


How can extra hardware help?

©Navid Nikaein 2010

-

p
15


Mobile UI/UX Design Challenges


Handed Operation


Text Entry


Small Screen


Consistent User Interface Style


Personal Data


Always On, Always Connected


Battery‐Powered


Inconsistent Connectivity


Changing User Context

©Navid Nikaein 2010

-

p
16


USER EXPERIENCE

©Navid Nikaein 2010

-

p
17


Mobile Experience: the three ingredients




Context


Information architecture


Visual design




Ref: Designing the Mobile User Experience, by B.
Ballard

©Navid Nikaein 2010

-

p
18


Element of User Experience

©Navid Nikaein 2010

-

p
19


Mobile Experience: User Context


Awareness of user
environment

by adding
relevant

information

on the present as a function of user
preferences


User becomes part of the experience


User experiences a better decision
-
making


My environment (physical location/social context) may influence my actions


Context is what make mobile device a powerful medium

©Navid Nikaein 2010

-

p
20


Mobile User

Mobile
Device

Mobile Web

Environment

Context

Context Example

©Navid Nikaein 2010

-

p
21


Wikitude

Layar

Distracter driver (
http://www.youtube.com/watch?v=EUgq_h8clv8

)

Application Context Matrix

UX type

Task type

Task duration

Combine with

Utility

Glace

Information
recall

Short

Immersive

Local

Location
-
based

Contextual
information

Quick

Immersive

Informative

Content
-
based


Seek
information

Quick

Local

Productivity

Task
-
based

Content
management

Long

Utility

Immersive

Full screen

Entertainment

Long

Utility, local


©Navid Nikaein 2010

-

p
22


Mobile Experience: Information Architecture


How the information is structured and shaped and how
users interact with it through different devices


Combining organization, labeling/tagging, searching, and navigation
system


Supporting usability and
findability


How intuitive is to find information and perform tasks

©Navid Nikaein 2010

-

p
23


User

Context

Content

Comparison

©Navid Nikaein 2010

-

p
24


How to interpret the content to the mobile context ?

How to address non
-
French reader?

Comparison

©Navid Nikaein 2010

-

p
25


How to prioritized? How to navigate?

What about the user interactions?

Mobile Experiences

©Navid Nikaein 2010

-

p
26


If I am not in NY, should I see the local headlines or

instead the headlines based on my location?

Information Architecture: Usability ?


Ease of learning


Faster the second time and so on...


Recall



Remember how from one session to the next


Productivity


Perform tasks quickly and efficiently


Minimal error rates


If they occur, good feedback so user can recover


High user satisfaction


Confident of success

©Navid Nikaein 2010

-

p
27


Design

Implement

Evaluate

Information Architecture:
Findability



Ease with which information can be found


UI design


Accessibility


Search engine


Evaluated through: tree testing and usability testing

©Navid Nikaein 2010

-

p
28


Design

Implement

Evaluate

Information Architecture: Guidelines


Simple IA with clear and simple labels


What things are called (taxonomy)


Clear Site Map Organization


Limited/no opportunities to mistake


Confirm the path


Clickstream



Identify the shortcuts


by mapping the paths the user will take to
perform the common task


Identify the flaws


by observing the order in which users may
travel through your IA


Wireframes


Layout information


Behavior


Flow


Prototype …

©Navid Nikaein 2010

-

p
29


Example

©Navid Nikaein 2010

-

p
30


Mobile Experience: Visual Design


Requires
creativity

and is a direct representation of
everything underneath


Produce a relationship with users beyond any specific culture


Good design matters


Users look at multiple screenshots


Users read the reviews, check stars and download rate


Users judge the app based on the quality of its icon

©Navid Nikaein 2010

-

p
31


Visual Design Elements


Messaging and branding


Look and feel


Layout


Color


Typography


Graphics


©Navid Nikaein 2010

-

p
32


A Quick Comparison


Minimalist design vs heavy design


Content
-
oriented vs. immersive

©Navid Nikaein 2010

-

p
33


BRIEF GUIDELINES

©Navid Nikaein 2010

-

p
34


Mobile Design Guidelines: Visual Design


Use visual design to deliver your message and use branding to reinforce the message


Use context and user preferences to adapt look and feel and evoke user actions


Start building layout during the IA phase


Different layout for different devices


Know your screen before dealing with the colors and font type


Color bit depth (12
-
bit, 16
-
bit, 18
-
bit, 24
-
bit)


Subpixel

(RGB) and pixel density (PPI)


Know the physiology and culture of colors


Appropriate font type and size improve the
readibility



Contrast adapted to user
environement


Line spacing (screen size determines how far the device is held from the eye)


Leave some space, don’t crowd the screen


Use headings and short paragraphs


Use graphics to establish a visual experience


As complementary to look and feel


As content displayed with text


Size plays an important role in the recognition of images

©Navid Nikaein 2010

-

p
35


Mobile Design Guidelines: Interactions


Text input has to be minimized



Search for innovative techniques for selection and language input.


Designing interfaces that require less attention in dynamic
environments



Hardware buttons have some significant advantages on
software (touch screen) buttons when it comes to eyes
-
free interaction


Place interactive elements at bottom of screen


Users should get enough feedback from the device


adapted to the user’s circumstances, e.g. no visual messages when
a user is driving a car


immediate warning and fallback when Wi
-
Fi
-
connection or GPS is
down

©Navid Nikaein 2010

-

p
36


Mobile Design Guidelines: Text input


Good defaults


current date, time


Auto‐completion and predictive text
entry


Use information from other sources


desktop computer, laptop


Alternate input methods


bar codes, QR codes, camera images,
speech


Gesture‐based text entry methods


ShapeWriter

or
Swype


Shake
-
based text entry

©Navid Nikaein 2010

-

p
37


Mobile Design Guidelines: Always On


The way people use the mobile phone : usage model


Laptop: set it and sit down and use it


Mobile


Variable context and environment


Use casually, short burst


Frequent interruption


Not planned to use it


Users are always connected and thus may be interrupted by a
notification at any time


Users may want to use your application when it is socially
unacceptable


Implications:


Provide clues to help a user reorient if they return to your application after an
interruption



Don’t require voice input, provide a fallback


Avoid potentially disruptive feedback, such as audio cues or screen flashes

©Navid Nikaein 2010

-

p
38


Mobile Design Guidelines: Battery Powered


Wireless signal may drop at any time


Using the network eats battery power


Solutions:


Avoid network usage on every interaction


Store commonly‐used data on the device


Cache content as much as possible


Pre‐fetch content when power or network are readily
available


Don’t misrepresent age of data or completion of task when
working around network problems

©Navid Nikaein 2010

-

p
39


Reading lists 1 : Platform
-
independent


Tap worthy: Designing Great
iPhone

Apps, by J. Clark


Designing the
iPhone

User Experience: A User
-
Centered Approach to Sketching and
Prototyping
iPhone

Apps, by S. Ginsburg


Mobile Design and Development: Practical Concepts and Techniques for Creating
Mobile Sites and Web Apps (Animal Guide), by B. Fling


Designing the Mobile User Experience, by B. Ballard


Mobile Interaction Design, by G. Marsden


Strategic Mobile Design: Creating Engaging Experiences, by J.
Cartman

and R. Ting


iPhone

User Interface Design Projects, by K. Peters,


Designing for Small Screens (Required Reading Range)


Sketching User Experiences: Getting the Design Right and the Right Design,

Bill
Buxton.


Search User Interfaces,
Marti A. Hearst,

http://www.searchuserinterfaces.com/



Review of User Interface Prototyping Tools,
http://www.dexodesign.com/2008/11/07/review
-
16
-
user
-
interface
-
prototyping
-
tools/

©Navid Nikaein 2010

-

p
40


Reading list 2 : Platform Specific


iPhone

Human Interface Guidelines



PDF version



iPad

Human Interface Guidelines



PDF version



UI Guidelines for BlackBerry 6.0
Smartphones



PDF version



UI Guidelines for BlackBerry 4.x, 5.x
Smartphones



PDF version



Android User Interface Guidelines



BlackBerry Browser Content Design
Guidelines (PDF)



Motorola’s Best Practices for Android
UI



Nokia Design & User Experience
Library



Symbian^3 UI Style Guidelines (PDF)



Forum Nokia Design Portal (PDF)



Symbian

UI Wiki



Bada

Application UI Guide



Sony Ericsson UI Rulebook



UI Guidelines for Windows Mobile



Windows Touch UI Guideline



UI Design & Interaction Guide for
Windows Phone 7 (PDF)



webOS

UI Guidelines


Hildon

UI Guidelines for Nokia
Maemo



MeeGo

UI Design Guidelines

(shared
by Mark Jones)

©Navid Nikaein 2010

-

p
41


XML

©Navid Nikaein 2010

-

p
42


XML Usage


XML provides a set of rules for supporting application
-
specific vocabularies


XML also can be used for representing complex
structured documents


Examples:


RSS and Atom are XML vocabularies for newsfeeds


OpenDocument

(ODF) is a language for office application
documents


designed for open and interoperable exchange


standardized by ISO


Scalable Vector Graphics (SVG) for portable vector graphics


designed for embedding in Web pages

©Navid Nikaein 2010

-

p
43


Markup


Structures are encoded using special characters


A fundamental difference in comparison to binary formats


Markup languages can be read and modified using text
-
based
tools


Application must treat markup characters in a special way


Information are shaped with markup (i.e., structures)


XML
-
aware software interprets the markup


XML
-
unaware software just sees a text file


modifications must be made XML
-
aware


You need a parser for interpreting the markup


Libxml2

©Navid Nikaein 2010

-

p
44


Concepts


XML Documents have an XML declaration (optional)


There is exactly one document element (a.k.a. root element)


Elements may be nested (there is no conceptual limit)


Elements may be repeated (they can be identified by position)


Elements are marked up using tags


Most elements have content, surrounded by start tags and end tags


Empty elements are allowed and may use a special notation


Elements may have attributes (zero to any number)


Attributes can only occur once on an element (i.e., they cannot be repeated)

©Navid Nikaein 2010

-

p
45


<?xml version="1.0" encoding="UTF
-
8"?>

<element>


<sub
-
element attribute="value">Content</sub
-
element>

</element>

Tree Syntax


Markup is important, but only a notation


XML documents are trees with different node types


nodes: document, element, attribute, text

©Navid Nikaein 2010

-

p
46


Element


Elements can use a wide variety of names


http://www.w3.org/TR/xml/#NT
-
Name


Element names usually convey some information about
the content


Useful when working with a known vocabulary


Harmful when working with an unknown vocabulary


Elements are the foundation for XML's versatility


they can be nested


<address><city>Berkeley</city><zip>94720</zip>…


they can be repeated


<
givenname
>Erik</
givenname
><
givenname
>Thomas</
givenname
>


their sequence can convey additional information


given names have a sequence

©Navid Nikaein 2010

-

p
47


Attributes


Additional information pertaining to elements


Content: Data


Attributes: Metadata


Naming rules are the same as for Elements


Attributes always appear within an element's
start tag


Attributes are name/value
-
pairs and enclosed in single or double quotes


http://www.w3.org/TR/xml/#NT
-
Attribute


©Navid Nikaein 2010

-

p
48


<section id="xml" author=“
navid
">


<title>XML</title>


<p>XML is a markup language ...</p>


<p type="example">XML can be used ...</p>


<section id="xml
-
syntax" author=“
navid
">



<title>XML Syntax</title>



<p>Section <ref name="
sgml
-
syntax"/> describes ...</p>

</section>

</section>

-

p
49


EURECOM MEMBERS

©Navid Nikaein 2010