6 rules for building amazing apps for mobile & tablet devices
Post on 20-Aug-2015
7.015 Views
Preview:
TRANSCRIPT
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1.
2.
3.
4.
5.
6.
The Puget Sound Region
The Puget Sound Region
“They have the best co!ee, computers and smack”
—Robyn HitchcockViva Sea-Tac
STREETS CARTOGRAPHY CALIPER CRANE ESCAPEMENT TUMBLER_LOCK GEARS
PLUMBING SPIRAL_STAIRCASE URBAN_PLANNING CROSSBOW WINCH
WHEELBARROW SHOWERS CENTRAL_HEATING LIGHTHOUSE
ALARM_CLOCK CHAIN_DRIVE CANNON LEVERS WATER_MILL GIMBAL DRY_DOCK
ANALOG_COMPUTERS FIRE_HOSE VENDING_MACHINE WIND_VANE
CLOCK_TOWER AUTOMATIC_DOORS
Ancient Greek Technology
POLITICAL_PHILOSOPHY ETHICS METAPHYSICS
ONTOLOGY LOGIC BIOLOGY RHETORIC
& AESTHETICS
“Greek philosophy has shaped the entire Western thought since its inception.”
ABACUS AMPHITHEATER AQUEDUCT ARCH BOOK BRASS BRIDGE CAMEOS CAST_IRON
CEMENT CRANE DAM DOME LOOM FLAMETHROWER GLASS BLOWING
HAND_SOAP HYDRAULICS HYDROMETER KNIFE LIGHTHOUSES LEATHER MILLS
STEAM_ENGINE NEWSPAPER ODOMETER PADDLE_WHEEL PEWTER POTTERY
REAPER SAILS RUDDER SAUSAGE SEWERS SPIRAL_STAIRCASE STENOGRAPHY
STREET_MAPS SURGICAL_INSTRUMENTS
Some Innovations from the Roman Empire
“In an economy where the only certainty is uncertainty, the one source of lasting competitive advantage is knowledge. When markets shift, technologies proliferate, and products become obsolete almost overnight, successful companies are those that consistently create new knowledge, disseminate it widely throughout the organization and quickly embody it in new technologies and products”
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1. UNDERSTAND THE MEDIUMGet to know what your tablet means to your users and how they will use them.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONChances are you’ve never done anything like it before.
5. FOCUS ON THE DETAILSA gift for pixel perfection and psych degree can come in handy.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#1
Phones are about making the most of the moment, simple tasks,& context.
Tablets are about focus, consumption, simple tasks & portability.
...or just think of your app as a great book.
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1. UNDERSTAND THE MEDIUMGet to know what your tablet means to your users and how they will use them.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONChances are you’ve never done anything like it before.
5. FOCUS ON THE DETAILSA gift for pixel perfection and psych degree can come in handy.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#2
1 out of 3 projects go sideways because of
BAD DATA
Content is Data
there is noDesign without Data
1 out of 3 projects go sideways because of
BAD DATA
“A new form of Web content that is
meaningful to computers will unleash a revolution
of new possibilities.”
Push or Pull?
Figure out how your app will Push & Pull data
before you begin.
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1. UNDERSTAND THE MEDIUMGet to know what your tablet means to your users and how they will use them.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONChances are you’ve never done anything like it before.
5. FOCUS ON THE DETAILSA gift for pixel perfection and psych degree can come in handy.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#3
JARGON ALERT
ContextThe circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
Always add value to the users context*
Always add value to the users context*
*Doing so requires a little Psych 101
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1. UNDERSTAND THE MEDIUMGet to know what your tablet means to your users and how they will use them.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONChances are you’ve never done anything like it before.
5. FOCUS ON THE DETAILSA gift for pixel perfection and psych degree can come in handy.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#4
CONTEXT MEDIUM(Mobile)
INTERACTION
?
JARGON ALERT
NeedsThe circumstances in which something is necessary, or that require some course of action.
Abraham Harold Maslow (April 1, 1908 – June 8, 1970) was an American psychologist. He is noted for his concept-ualization of a "hierarchy of human needs", and is considered the founder of humanistic psychology.
“Unlike personality, attitudes are expected to change as a function of experience.”
Affect.
JARGON ALERT
Affective ResponseThe emotional response that expresses an individual's degree of preference for an entity.
Affect. Behavior.
JARGON ALERT
Behavioral IntentionThe verbal indication or typical behavioral tendency of an individual.
Affect. Behavior. Cognition.
JARGON ALERT
Cognitive ResponseThe evaluation of the entity that constitutes an individual's beliefs about the object.
The “deck” is still very much alive and doing incredibly well.
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1. UNDERSTAND THE MEDIUMGet to know what your tablet means to your users and how they will use them.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONChances are you’ve never done anything like it before.
5. FOCUS ON THE DETAILSA gift for pixel perfection and psych degree can come in handy.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#5
with Brian Fling
Rules for Building Amazing Apps for Mobile & Tablet6
1. UNDERSTAND THE MEDIUMGet to know what your tablet means to your users and how they will use them.
2. GET YOUR DATA DIALEDData is the new content, and it comes from everywhere.
3. BE A MASTER OF CONTEXTDive into context, it is the easiest way to level up to awesomeness.
4. DESIGN FOR INTERACTIONChances are you’ve never done anything like it before.
5. FOCUS ON THE DETAILSA gift for pixel perfection and psych degree can come in handy.
6. ALLOW AMPLE TIMEIt takes a lot longer than you might think.
#6
Mobile Design = Web Design
Mobile Design = Web Design
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James Garrettjjg@jjg.net
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
Mobile Design is Software Design
Mobile Design is Software Design
Mobile Design is an entirely new breed of
design.Of which the rules and best
practices are still being defined.
Over 10 years in mobile & I still feel like it’s the
first day in school
Planning Interactions Design Integration Development Testing Fixes Deployment
DESIGNERS DEVELOPERS
Case Studies
Get in TouchFind Out How We Can Help You.
Brian FlingFounder & President
brian@pinchzoom.com+1 206 351-6060
Charlie BarrClient Director
charlie@pinchzoom.com+1 206 395-5085
My name is Brian Fling and Iʼm a Mobile Designer
twitter.com/flingbook mobiledesign.orgcompany pinchzoom.comblog flingmedia.com
THANK YOU
top related