Lecture 2:

z Application Design

Robel M.
z
Agenda

❖ Mobile Context

❖ Information Architecture

❖ Design Elements

❖ Mobile Web vs Native Applications

z
Mobile Context
 z
What is context?

❖ Any information that can be used to characterize the situation of an

entity.
▪ Entity is a person, place or object
▪ In Our Case: relevant to the interaction between a user and app
▪ It includes the user and app themselves,
In general
▪ User
▪ Task
▪ Environment
▪ Device
z Examples of context

❖ Temperature

❖ User preferences

❖ Lighting

❖ Location

❖ Nearby resources (such as printers)

❖ History
 z
What is Context-Aware Mobile Computing?

▪ A system is context-aware if it uses context to provide relevant information

and/or services to the user, where relevancy depends on the user’s task.”

▪ Applications that can detect their user’s situations and adapt to their
behaviors accordingly.

▪ A software that adapts according to it’s context!

z
Why Context?

❖ Present services and information to a user

Examples: The time of day and restaurants near the user

❖ Automatically execute a service for a user

Example: A phone automatically setting a weekly alarm for the user

❖ Tag information to retrieve at a later time

Example: Phone keeps track of recent calls
z
Context Sensing
Low level context sensing
▪ location : GPS, IR, etc.…
▪ Orientation
▪ time, temperature, pressure
▪ etc.…
High level context sensing
▪ Activity
✓ Machine vision based on camera tech & image
processing
✓ Combine several low-level context (AI)
 z Categories of Context

▪ Computing context includes network connectivity, communication

costs, communication bandwidth, and local resources, such as
printers, displays, and workstations
▪ User context includes user profiles, location, his or her purpose for the
site/app visit,
▪ Physical context includes lighting and noise levels, traffic
conditions, and temperature
▪ Temporal context includes time of day, week, month, and season of
the year

▪ Context history is the recording of computing, user, and physical context over time
 z Considering Context: The 5 W’s

▪ Who is the user? Who are the people with which the user is interacting, or who
is nearby?
✓ Social context
▪ What is the user doing?
✓ Function context
▪ Where is the user? Home? Work? Bathroom? Familiar coffee shop?
✓ Location context, the most widely used type of context

✓ Raw location or higher level

▪ When? What time is it?

✓ Temporal context

▪ Why? Why is the user performing a certain task?

Motivating context, one of the most difficulty type of context
z

Low-level
❖ Can be sensed directly using sensors or through simple processing

❖ E.g., by accessing a database, room temperatures

High-level details
❖ Involve the amalgamation of low-level context information and sophisticated
processing

❖ Social situation, activities

z
Context-Aware Computing & Apps

Context-Aware Computing Devices & Applications - Mobile

applications
▪ User’s context changes frequently
▪ Need context-aware behavior

Capability & Features

▪ Proactive in acquiring contextual information
▪ Adapt their response based on the acquired info
 z
Context-aware Requirements
❖ Contextual Sensing
✓ Detection of environmental states

❖ Contextual adaptation
✓ Capability of the system to adapt its behavior by using contextual
information
❖ Contextual resource discovery
✓ Capability to discover available resources in an environment

❖ Contextual augmentation/ processing

✓ Capability to associate contextual information with some digital data
✓ Example: association of a particular meeting place and attendees with a set
of minutes
✓ Example: association of a digital photo with a specific location
z

INFORMATION ARCHITECTURE
 z
Information Architecture

▪ The structural design of shared information environments.

▪ Information architecture is the practice of labeling and organizing content to

enhance findability and usability.

▪ In a mobile-first world, information architecture is linked to mobile navigation

patterns and design best practices.
 z IA Architecture

❖ Organization System
✓ A way to present information, e.g. content categories

❖ Navigation system
✓ Help user move through the content

❖ Search system
✓ Allow user search the content

❖ Labelling system
✓ Describe categories, options, and links in language that (hopefully) is meaningful to
users;
z
How is mobile different?

❖ Small size, lighter, more portable

✓ More convenient to use

❖ Many users feel real emotional connection to their devices

z
Summary

❖ Information architecture is concerned with

✓ Understanding the structure and

✓ Organization of the content of the app.

❖ Navigation concerns
✓ How people move around the app and

✓ How they get to know

▪ What is on the app and where it is.

z
New Rules for Mobile App Design

❖ R1: Forget what you think you know

❖ R2: Believe what you see, not what you read

❖ R3: Constraints never come first

❖ R4: Focus on context, goals and needs

❖ R5: You can’t support everything

❖ R6: Don’t convert, create

❖ R7: Keep it simple.

 z

Do not do everything because you know how to do it!

 z Workflow for Application Development
▪ The most important design concern in the design of an application
running in a mobile device is:
▪ The consistency of user experience
▪ This aspect can be affected by a number of design choices taken during the
development of applications, resulting in consistent usability.

▪ A common workflow for the development of apps, with special focus

on usability and user activities, has been defined by Salmre (2005),
consisting of:
▪ Scoping,
▪ Performance considerations,
▪ User interface design,
▪ Data model and memory concerns,
▪ Communications and I/O.
 z Scoping

❖ Before starting the design of an application

✓ Identify the fundamental purpose of the application,including:

✓ What the application can do

✓ What it cannot.

❖ Mobile specific
✓ A subset of functions must be selected that will be included in the implementation.

Furthermore, the physical characteristics of the device must be taken into account, if they imply
restrictions.

Scoping can be helped by conceptualizing the application with pictures, mockups, and creating
prototypes.
 z
Performance considerations

▪ After scoping
 Must consider performance.

▪ General responsiveness metrics

 Defining how fast it should be to open a menu in the application.
▪ Overall responsiveness
 Important for user experience.
 Specific metrics should be created for the most important scenarios.

▪ One way to design for performance is to use an older (or simply less capable)
hardware for early experiments.
 z
User interface design

▪ Before advancing to the technical design

▪ – it is important to study key use cases and features that characterize the application.

▪ If the performance provided by the prototype implementation is good enough in

studies, it is time to focus on the right user interface.

▪ End-user productivity and responsiveness is the most important principles of UI

design.
 z
Data model and memory concerns

❖ Mobiles are
▪ Small screen size

▪ Offer restricted facilities for application development.

❖ Tasks

▪ Display large amount of data in small screen

▪ Application must be full functional

❖ But without violating

▪ Size
▪ Power
▪ Processing capability
 z
Communications and I/O
▪ The way communications and I/O are defined determines how the application
communicates with the resources that are located beyond its control.

▪ This includes devices’

 Internal resources – such as files and subsystems,

 External resources – SD card

▪ It require a communications mechanism before an access

▪ Socket-based communications
 Files on servers, Web Services, and remote databases

▪ The way in which the application handles local and remote resources has a major
effect on usability.
 z

MOBILE WEB VS NATIVE APPLICATIONS

z
Types of Mobile Apps

▪ HTML5
▪ Native

▪ Hybrid (HTML5 + Native)

 z
1. HTML5 App

▪ HTML5 Apps run inside a Browser and cannot make use of many things that Mobile
OS provides, like File System, SQLLite Database, Network APIs, Camera, Contacts
etc.
▪ A few APIs are exposed to browser JavaScripts like GeoLocation, very limited
local storage, and more.
 z
HTML5 App Capabilities

▪ Some HTML5 Capabilities include:

– GeoLocation
– Audio/Video Tag
– Canvas/SVG
– Local Storage
– Web Workers
– Web Sockets
z
HTML5 App
Pros

▪ Lowest Development Cost

▪ Maximum Reuse

▪ Use Same team

▪ No App Store Distribution hassles

▪ Instant Updates, Clients on latest Version

 HTML5 App
z Cons

▪ User needs to open browser ▪ An HTML5 App runs as long as a

browser is running.
▪ Loading time is slowest
▪ HTML5 Apps start only when a
user starts them;
▪ No notification available for updates
▪ No native-like background
▪ Limited access to Phone Features processing is available.

▪ App Store Marketing not available

▪ Simulation of Native UX
 2. Native App
z

Twitter App

Full Access

Mobile OS

File System SQL-Lite Network Camera GeoLocation

Contacts Accelerometer Native APIs ..... .....

 Native App
z
Pros

❖ The prowess of Mobile is available

❖ Ability to build Richest & Fastest Apps
❖ Notifications Available
❖ Offline Storage Available
❖ Background Processing Available.
❖ Entire Device Sensor Array Available
❖ App Store/Market Monetization Possible
z
Native App
Cons

▪ Highest Development Cost

▪ Dedicated teams for different Platforms

▪ Design/Code Reuse not Possible

▪ AppStore/Market approval is prerequisite for launch of new features

▪ Longer development time

z
3. Hybrid Mobile App

▪ Hybrid Apps are Native Apps

▪ Web App is hosted inside Native App

▪ Web App's JavaScript can communicate to Native and back

z Hybrid Mobile App
Pros

▪ Best of Both Worlds

▪ HTML5 in Embedded Browser
▪ Business Logic in HTML 5/Server
▪ Sensor Array available via Native
▪ Native App with Embedded Browser
▪ Any Extensions are Native
 z
Hybrid Mobile App
Cons

▪ Development Environment is Complex

✓ Eclipse, XCode, Visual Studio

▪ Both Web and Native Skills are required

▪ Native Skills required for extensions across platforms
▪ Pains from both worlds: Catching up on new OS and HTML5 Feature sets
 z
Factors for Choosing
Native Hybrid HTML5

Performance Highest High Low

Rich UI Highest Moderate Moderate

Development Cost Highest High Lower

Time to Market Longest Moderate Shortest

Maximum Maximum
App Store Engagement No Engagement
Engagement Engagement

Security Highest High Limited

z
Factors Affecting Choice

Product Features

Time/Cost to
Market

Kind of Audience

Available Team &

IP
 Final Comparison
z

Native HTML 5 Hybrid

• Needs Richest UI • Needs rich Mobile

• Needs Rich UI
• Focuses on Single users with minimal
Platform (Mobile is cost and effort • Focuses on Multiple
the main platform) • App Store
Platforms

• Can be used to Marketing and • Can be used to build

build Authoring Monetization are Enterprise Apps,
tools, Games, not important Travel/News Apps, Sync
Clients, etc.
Social Networking • Required as a
Apps etc. fallback for social • Most of the time will
• Very Concerned with e.g, Twitter still has suffice your needs
UX (Apple-like a mobile web site
Quality)
z

THANK YOU!