sm3121 design for small devices mark green school of creative media

SM3121SM3121Design for Small DevicesDesign for Small Devices

Mark GreenMark Green

School of Creative MediaSchool of Creative Media

IntroductionIntroduction

Small devices have three main Small devices have three main limitations that effect design:limitations that effect design:

1.1. Small screen size – maximum is 320x240, Small screen size – maximum is 320x240, on phones it could be 128x128 or lesson phones it could be 128x128 or less

2.2. Limited input devices – no keyboard, text Limited input devices – no keyboard, text entry isn’t easy, no mouseentry isn’t easy, no mouse

3.3. Limited storage – no mass storage devices, Limited storage – no mass storage devices, some device have flash memory, but some device have flash memory, but nothing like a disknothing like a disk

Screen SizeScreen Size

For PDAs we can assume 320x240For PDAs we can assume 320x240 For phones we will use 128x128, some For phones we will use 128x128, some

are smaller and some are largerare smaller and some are larger Small screens are very different from large Small screens are very different from large

screens (at least 640x480)screens (at least 640x480) It is not just a smaller version of the same It is not just a smaller version of the same

thing, design and interaction are quite thing, design and interaction are quite differentdifferent


On a large screen we can have:On a large screen we can have: Multiple windowsMultiple windows Multiple applicationsMultiple applications Lots of icons and buttonsLots of icons and buttons Complicated menusComplicated menus

For many applications we can see the For many applications we can see the entire user interface, all the menus, all the entire user interface, all the menus, all the commands that we can selectcommands that we can select


With large screens we can rely on visual With large screens we can rely on visual recognition, the user will see what he or recognition, the user will see what he or she needsshe needs

We can have multiple applications visible, We can have multiple applications visible, easy for the user to switch between easy for the user to switch between applications, just click in the windowapplications, just click in the window

Easy to combine information from multiple Easy to combine information from multiple sources/applicationssources/applications


We can’t do this with small displaysWe can’t do this with small displays Can only have one window and application Can only have one window and application

at a timeat a time Not easy to switch between applications, Not easy to switch between applications,

need several button pressesneed several button presses Can’t see information from multiple Can’t see information from multiple

sources at the same timesources at the same time May not be able to see entire applicationMay not be able to see entire application


Not much room for user interfaceNot much room for user interface Often can’t show both user interface and Often can’t show both user interface and

data at the same timedata at the same time Can’t show a complete menu on the Can’t show a complete menu on the

screenscreen With large screen can have menus with 50 With large screen can have menus with 50

to 100 items, on a phone may only be able to 100 items, on a phone may only be able to display 3 or 4 itemsto display 3 or 4 items


User interface implications:User interface implications: User won’t be able to see entire interface, User won’t be able to see entire interface,

won’t know what’s possible at a glancewon’t know what’s possible at a glance May need to perform many actions to get to May need to perform many actions to get to

the item that they wantthe item that they want Using these systems on the run, don’t Using these systems on the run, don’t

have time to explore all the menus, try to have time to explore all the menus, try to find where a feature is hiddenfind where a feature is hidden

Input DevicesInput Devices

Most devices just have a few buttonsMost devices just have a few buttons A phone will have 15-24 buttons, but A phone will have 15-24 buttons, but

typically no way to point at screentypically no way to point at screen PDAs have fewer buttons, but screen is PDAs have fewer buttons, but screen is

touch sensitive, can use stylus like a touch sensitive, can use stylus like a mousemouse

Text entry is quite difficult, combination of Text entry is quite difficult, combination of key press, or virtual keyboardkey press, or virtual keyboard


Phones use buttons to navigate screen Phones use buttons to navigate screen and user interfaceand user interface

Want to reduce button presses to a Want to reduce button presses to a minimumminimum

Phone designers want to have few keys, Phone designers want to have few keys, phones are smallerphones are smaller

Few keys makes it hard to design the user Few keys makes it hard to design the user interfaceinterface


Can’t have a key for each functionCan’t have a key for each function Each key must have multiple functions, Each key must have multiple functions,

used for different thingsused for different things How does the user keep track of the How does the user keep track of the

functions, know what the key will dofunctions, know what the key will do Some keys used for general operations, Some keys used for general operations,

scrolling up and down a menu, making scrolling up and down a menu, making selectionsselections


Soft keys – key changes function Soft keys – key changes function depending upon what you are doingdepending upon what you are doing

Very common on phonesVery common on phones Need to tell user what the key will doNeed to tell user what the key will do Label of soft key shown on display, Label of soft key shown on display,

changes when function changeschanges when function changes Takes up display space, users must Takes up display space, users must

associate label with keyassociate label with key

StorageStorage

Can’t store a lot of stuff on mobile devicesCan’t store a lot of stuff on mobile devices Phones have around 1 MByte, some phones Phones have around 1 MByte, some phones

now have a lot morenow have a lot more PDAs can have 32 or 64 MbytesPDAs can have 32 or 64 Mbytes

Can’t have a lot of applications, and none Can’t have a lot of applications, and none of them can be largeof them can be large

Can’t have a complete office suite, not Can’t have a complete office suite, not near enough storage spacenear enough storage space

StorageStorage

Also can’t have a modern PC game, some Also can’t have a modern PC game, some require over 1GByterequire over 1GByte

Slow data communications complicates Slow data communications complicates the problem, phone can’t quickly get large the problem, phone can’t quickly get large amounts of dataamounts of data

Need to think carefully about what an Need to think carefully about what an application needs, what the user really application needs, what the user really needs to have with themneeds to have with them

StorageStorage

Carefully calculate image resolutions, Carefully calculate image resolutions, don’t want to store more data than can be don’t want to store more data than can be displayeddisplayed

Are all the images necessary? Can they Are all the images necessary? Can they be compressed?be compressed?

Only include the functions that people Only include the functions that people really needreally need

Keep it simpleKeep it simple

Social IssuesSocial Issues

Mobile devices have a different social role Mobile devices have a different social role than PCsthan PCs

A PC stays in one spot, it may be yours A PC stays in one spot, it may be yours but it doesn’t move with youbut it doesn’t move with you

Its used for a wide range of tasksIts used for a wide range of tasks Mobile devices are more personal, you Mobile devices are more personal, you

carry them with you, they are used for carry them with you, they are used for communicationscommunications


Mobile versus stationary is important Mobile versus stationary is important A PC is associated with place or location, A PC is associated with place or location,

we see its role based on its locationwe see its role based on its location An office PC for office workAn office PC for office work A home PC for games and entertainmentA home PC for games and entertainment

Mobile devices move with us, they can Mobile devices move with us, they can have many roles, but the emphasis is on have many roles, but the emphasis is on communications, social interactioncommunications, social interaction


Mobile devices used in a range of places Mobile devices used in a range of places in different rolesin different roles

Don’t have control over the environment, Don’t have control over the environment, who is around you, level of privacywho is around you, level of privacy

Mobile devices are personal, people want Mobile devices are personal, people want to make them different, a statement about to make them different, a statement about themselvesthemselves

People become attached to their mobile People become attached to their mobile devicesdevices


Communications technologies change our Communications technologies change our behaviorbehavior

Expect fast replies from email, but willing Expect fast replies from email, but willing to wait a week or more for a written letterto wait a week or more for a written letter

Email is between written and spoken Email is between written and spoken communications, we expect people to communications, we expect people to respond quickly, be less formal than respond quickly, be less formal than written communicationswritten communications


SMS has produced new languages that SMS has produced new languages that aren’t used elsewherearen’t used elsewhere

Small screens and text entry difficulties Small screens and text entry difficulties result in many abbreviations and special result in many abbreviations and special expressionsexpressions

Developed around SMS and only use Developed around SMS and only use therethere

How will people react to our application?How will people react to our application?


Need to study people in their own Need to study people in their own environment, where they work and playenvironment, where they work and play

How do they want to use the technology?How do they want to use the technology? Remember that there are differences Remember that there are differences

between culturesbetween cultures Applications acceptable in one culture Applications acceptable in one culture

aren’t acceptable in another, need to aren’t acceptable in another, need to consider thisconsider this


Example: in Japan it is considered rude to Example: in Japan it is considered rude to talk on a mobile phone in publictalk on a mobile phone in public

Instead SMS is used in public areasInstead SMS is used in public areas Rarely hear someone talk on phone in Rarely hear someone talk on phone in

trains, buses, etctrains, buses, etc Here it is considered normal to yell on Here it is considered normal to yell on

phones in public areasphones in public areas In North America that would be view as a In North America that would be view as a

sign of aggression and criminal behaviorsign of aggression and criminal behavior

Basic DesignBasic Design

Design constraints drive our design Design constraints drive our design approachapproach

Need to make good use of limited Need to make good use of limited resources, strip our applications down to resources, strip our applications down to the bare essentialsthe bare essentials

Start with the problem of contextStart with the problem of context With PCs we can usually see all the With PCs we can usually see all the

information that we needinformation that we need


On PCs cut and paste is common, easy to On PCs cut and paste is common, easy to move things from one application to move things from one application to anotheranother

Can’t do this on a mobile device, can only Can’t do this on a mobile device, can only run one application at a timerun one application at a time

Can only see one small screen full of Can only see one small screen full of information at one timeinformation at one time

Most have everything we need visible or Most have everything we need visible or easy to remembereasy to remember


Requires a rethink of applicationsRequires a rethink of applications On a PC can use a set of applications, On a PC can use a set of applications,

each responsible for one set of data, to each responsible for one set of data, to perform a taskperform a task

On a mobile device, all of this information On a mobile device, all of this information must be in one place, or very easy to get must be in one place, or very easy to get to, must think about what the user is doing to, must think about what the user is doing and the information requiredand the information required


The key difference between applications:The key difference between applications: PC: designed around dataPC: designed around data Mobile: designed around the user’s taskMobile: designed around the user’s task

Example: designing a web siteExample: designing a web site For a PC, we think about the information For a PC, we think about the information

we want to tell the user, design the pages we want to tell the user, design the pages around the informationaround the information

An issue of information organizationAn issue of information organization


On a PC users expect to find a well On a PC users expect to find a well organized web site, based on the organized web site, based on the information, exploration is okay could even information, exploration is okay could even be funbe fun

On a mobile device exploration is difficult, On a mobile device exploration is difficult, users concentrate on the task at handusers concentrate on the task at hand

What to get at all of the relevant What to get at all of the relevant information quickly, preferably on one information quickly, preferably on one screenscreen


Example: web site for an Arts FestivalExample: web site for an Arts Festival On PC will want to have lots of images, On PC will want to have lots of images,

draw people into the site, encourage them draw people into the site, encourage them to attend eventsto attend events

Event listing could be one page with all the Event listing could be one page with all the information on all of the events, presented information on all of the events, presented in a table that the user can scroll throughin a table that the user can scroll through

Able to see all the events in summary formAble to see all the events in summary form


This won’t work on a mobile device, barely This won’t work on a mobile device, barely enough room for one event’s informationenough room for one event’s information

User won’t be interested in browsing, will User won’t be interested in browsing, will probably want the information on a probably want the information on a particular eventparticular event

They are in the MTR heading for the They are in the MTR heading for the event, they want to know when and where event, they want to know when and where it is, directions for getting thereit is, directions for getting there


User wants to enter the name of the event User wants to enter the name of the event and get location, time, directions as a and get location, time, directions as a responseresponse

This can all be placed on one screenThis can all be placed on one screen Need to have a quick way to navigate to Need to have a quick way to navigate to

this information on our mobile web sitethis information on our mobile web site Summary: think about what the user wants Summary: think about what the user wants

to do, this is harder than just designing a to do, this is harder than just designing a basic sitebasic site

Design FrameworkDesign Framework

A few standard approaches to design, A few standard approaches to design, some systems force you to follow a strict some systems force you to follow a strict frameworkframework

Applications organized as a set of screensApplications organized as a set of screens One screen is visible at a timeOne screen is visible at a time Limited number of options on each screen, Limited number of options on each screen,

a few buttons to press, a menu, text entrya few buttons to press, a menu, text entry Small number of interactionsSmall number of interactions


Think about device screen size, many can Think about device screen size, many can scroll horizontally and vertically, but this is scroll horizontally and vertically, but this is hard to usehard to use

Avoid horizontal scrolling, users quickly Avoid horizontal scrolling, users quickly get lost, vertical is okay if designed well, get lost, vertical is okay if designed well, user knows to scrolluser knows to scroll

The idea is that the user should be able to The idea is that the user should be able to find everything they currently need on a find everything they currently need on a single screen and it should all be visiblesingle screen and it should all be visible


The user moves from screen to screen The user moves from screen to screen based on their inputbased on their input

For a web based application can download For a web based application can download several screens at a time, but will several screens at a time, but will eventually need to fetch more screens eventually need to fetch more screens from the serverfrom the server

For non-web based applications, all the For non-web based applications, all the screen will be generated locally, no need screen will be generated locally, no need to wait for downloadto wait for download

Design ProcessDesign Process

Our design process should be task drivenOur design process should be task driven Determine what the user wants to do, the Determine what the user wants to do, the

things that he or she wants to accomplishthings that he or she wants to accomplish Why do they want to use our service or Why do they want to use our service or

application?application? What is the purpose of the interaction?What is the purpose of the interaction? What information are they after?What information are they after?


First determine the set of tasks:First determine the set of tasks: Talk to users, find out what they want to doTalk to users, find out what they want to do Think about what you would like to doThink about what you would like to do Ask the customerAsk the customer GuessGuess

For each task determine its priority or For each task determine its priority or importance and the information required to importance and the information required to complete itcomplete it


Priority is used to determine its position on Priority is used to determine its position on the menuthe menu

May only be able to display 4 menu items May only be able to display 4 menu items at a timeat a time

The first 4 are easy to get at, after that the The first 4 are easy to get at, after that the user must scroll, this will require a button user must scroll, this will require a button press for each itempress for each item

Want to reduce button presses, so most Want to reduce button presses, so most important item must be firstimportant item must be first


The information required for the task The information required for the task determines the set of screens requireddetermines the set of screens required

Want a small number of screens and few Want a small number of screens and few button pressesbutton presses

Also want to reduce the number of Also want to reduce the number of exchanges with a server, since this will exchanges with a server, since this will take timetake time

Gather as much information as possible Gather as much information as possible on each screenon each screen


Divide the work between the mobile device Divide the work between the mobile device and the serverand the server

Information retrieval will have to go on the Information retrieval will have to go on the server, be as specific as possibleserver, be as specific as possible

Other things are harder to design, things Other things are harder to design, things to keep in mind:to keep in mind: Processing power of the deviceProcessing power of the device Cost and time for communicationsCost and time for communications


Good idea to validate user input on the Good idea to validate user input on the device, don’t rely on server for thisdevice, don’t rely on server for this

Communications is expensive and slow, Communications is expensive and slow, want to get the most out of each exchangewant to get the most out of each exchange

If there are errors in the input, you get If there are errors in the input, you get nothing out of the exchange!nothing out of the exchange!

Cannot validate everything, but should do Cannot validate everything, but should do as much as possibleas much as possible


Remember that input is hard on a mobile Remember that input is hard on a mobile device, particularly textdevice, particularly text

Try to avoid text input, use selection Try to avoid text input, use selection wherever possiblewherever possible

Common items as selections, then use Common items as selections, then use textbox for less common itemstextbox for less common items

Use defaults whenever possible, use input Use defaults whenever possible, use input format to avoid switching modesformat to avoid switching modes


At the end of the design process we will At the end of the design process we will have a set of screenshave a set of screens

Know the information that should appear Know the information that should appear on each screen and the processing on each screen and the processing requiredrequired

Need to decide on implementation Need to decide on implementation approach, will this be a web application or approach, will this be a web application or will it require Java?will it require Java?

Design DocumentationDesign Documentation

How do we describe our design?How do we describe our design? What documentation techniques can What documentation techniques can

assist with design?assist with design? There are two things to keep track of:There are two things to keep track of:

Screen contentScreen content Relationship between screensRelationship between screens

These can be described separatelyThese can be described separately


For each screen need to record:For each screen need to record: Content of the screenContent of the screen InteractionInteraction LinksLinks LayoutLayout

This could be done in several ways, we This could be done in several ways, we could have a written description of each could have a written description of each screen, may be only choice if we aren’t screen, may be only choice if we aren’t sure of its designsure of its design


Better approach is to use some graphical Better approach is to use some graphical representationrepresentation

Basically draw a picture of the screenBasically draw a picture of the screen Easy to do if the content is static, may be Easy to do if the content is static, may be

more difficult with dynamic content more difficult with dynamic content (examples: game, video, streaming)(examples: game, video, streaming)

Could use a pencil sketch of each screen, Could use a pencil sketch of each screen, good approach in early designgood approach in early design


Use a word processor or drawing program Use a word processor or drawing program to produce screen imagesto produce screen images

More work, but better for final More work, but better for final documentationdocumentation

Can capture more of the details, like fonts, Can capture more of the details, like fonts, styles, size of elements, etcstyles, size of elements, etc

Don’t need to be exact, need some way to Don’t need to be exact, need some way to capture your thoughtscapture your thoughts


Relationships between screens: how to we Relationships between screens: how to we navigate between screens?navigate between screens?

For mobile devices this will usually be a For mobile devices this will usually be a hierarchy, something that is easy to hierarchy, something that is easy to rememberremember

Again a graphical representation is Again a graphical representation is probably the bestprobably the best

Easier to see how the screens are relatedEasier to see how the screens are related


Use simple diagram with a box for each Use simple diagram with a box for each screen, put name of screen in boxscreen, put name of screen in box

If there is a link from screen A to screen B, If there is a link from screen A to screen B, draw a line from the box for A to the box draw a line from the box for A to the box for Bfor B

Put the main screen at the top of the page Put the main screen at the top of the page and work downand work down

This will show the structure of the This will show the structure of the applicationapplication


Main

Task A Task B Task C

Task A1 Task A2 Task B1 Task B2 Task C1

Task C11

Task C12


The example was created in a few minutes The example was created in a few minutes using PowerPoint, could use this to quickly using PowerPoint, could use this to quickly outline the structure of the applicationoutline the structure of the application

Diagrams shows the usability of the Diagrams shows the usability of the application:application: Is the tree too deep, requires too many clicks Is the tree too deep, requires too many clicks

to get things doneto get things done Too many branches, hard to design easy to Too many branches, hard to design easy to

use menususe menus

Design GuidelinesDesign Guidelines

Details of design could depend upon how Details of design could depend upon how we implement the application, but there we implement the application, but there are some general design guidelinesare some general design guidelines

Determine the devices you will support:Determine the devices you will support: Minimum and maximum screen sizeMinimum and maximum screen size ColourColour Number of buttonsNumber of buttons Type of text entryType of text entry

May not support all devicesMay not support all devices


Keep smallest screen in mind when Keep smallest screen in mind when designingdesigning

Want to avoid horizontal scrolling, all Want to avoid horizontal scrolling, all elements should be narrower than screen elements should be narrower than screen width, check images for thiswidth, check images for this

Vertical scrolling is okay, but still need to Vertical scrolling is okay, but still need to be careful, may require many button be careful, may require many button presses to get to the end of the screenpresses to get to the end of the screen


Use compact layouts:Use compact layouts: Don’t waste spaceDon’t waste space Avoid large vertical gaps, confuses some Avoid large vertical gaps, confuses some

usersusers Flow text around imagesFlow text around images Don’t use decorations, keep to the essential Don’t use decorations, keep to the essential

materialmaterial Remember the task at hand, make it easy Remember the task at hand, make it easy

for the userfor the user


Keep text simpleKeep text simple Most mobile devices don’t have a large Most mobile devices don’t have a large

number of fonts, maybe only 2 or 3, so number of fonts, maybe only 2 or 3, so don’t specify particular fontsdon’t specify particular fonts

Keep variations in style to a minimum, only Keep variations in style to a minimum, only two or three styles per pagetwo or three styles per page

On a small screen too many text styles On a small screen too many text styles look bad, too hard to readlook bad, too hard to read


Control use of colour, many phones don’t Control use of colour, many phones don’t have colour displays!have colour displays!

Colour quality may be poor on low end Colour quality may be poor on low end phones and PDAsphones and PDAs

Use simple background colour, and only a Use simple background colour, and only a few foreground colours per screenfew foreground colours per screen

Don’t refer to items by colour, won’t work Don’t refer to items by colour, won’t work on b&w phoneson b&w phones


Aim for a consistent lookAim for a consistent look The same basic layout or design on each The same basic layout or design on each

screen, few different screen typesscreen, few different screen types Easier for the user to find information, Easier for the user to find information,

know how to use the applicationknow how to use the application Remember, they will be doing something Remember, they will be doing something

else while using your application, don’t else while using your application, don’t have 100% of their attentionhave 100% of their attention

Design ElementsDesign Elements

What can I put on a screen?What can I put on a screen? Depends on how the application is Depends on how the application is

implementedimplemented Look at what we can do with web pages, Look at what we can do with web pages,

this will work on the widest range of mobile this will work on the widest range of mobile devicesdevices

Later look at Java and other Later look at Java and other implementation techniquesimplementation techniques


To be specific we will look at:To be specific we will look at: Mobile profile of xHTML, xHTML MPMobile profile of xHTML, xHTML MP WAP cascading style sheets, WCCSWAP cascading style sheets, WCCS

This will run on most modern mobile This will run on most modern mobile phonesphones

Similar to using HTML, divide a web site Similar to using HTML, divide a web site into a number of pages, each page is a into a number of pages, each page is a separate fileseparate file


Browser downloads one file at a timeBrowser downloads one file at a time May want to put several screens in the May want to put several screens in the

same file to save download timesame file to save download time Standard screen format:Standard screen format:

Title: page title at the top of the screenTitle: page title at the top of the screen Softkeys: one or two keys at the bottom of the Softkeys: one or two keys at the bottom of the

screenscreen Body: the rest of the screenBody: the rest of the screen


The title should be fairly short, less than The title should be fairly short, less than 14 characters, indication of screen content14 characters, indication of screen content

Not all users will read the title, so don’t put Not all users will read the title, so don’t put anything crucial thereanything crucial there

Softkeys may not be available, some Softkeys may not be available, some browsers use them for their own browsers use them for their own commandscommands

Be careful not to confuse the user hereBe careful not to confuse the user here


Can have most of the standard text itemsCan have most of the standard text items Think carefully about formatting textThink carefully about formatting text Long lines will wrap to the next line by Long lines will wrap to the next line by

default on most browsersdefault on most browsers Use breaks <br/> to control text layout, Use breaks <br/> to control text layout,

don’t try to be much fancierdon’t try to be much fancier Look at the screen shots to see just how Look at the screen shots to see just how

little space there is for textlittle space there is for text


Notice the difference in formatting Notice the difference in formatting between the two phonesbetween the two phones

This is a simple list, imagine what would This is a simple list, imagine what would happen with more complex layoutshappen with more complex layouts

The screen size has a large impact on The screen size has a large impact on formattingformatting

Need to test on several phones to see how Need to test on several phones to see how things will lookthings will look


There are two ways to get more control There are two ways to get more control over format:over format: Use style sheets or <style> elementUse style sheets or <style> element Use tablesUse tables

Tables can be used in xHTML MP, either Tables can be used in xHTML MP, either to control layout of items or to present to control layout of items or to present tabular datatabular data

You need to be careful with tables, or they You need to be careful with tables, or they will make the formatting worsewill make the formatting worse


Be careful of table width, two columns is Be careful of table width, two columns is probably the widestprobably the widest

Avoid column labels, they take up space Avoid column labels, they take up space and are a waste if the table content is and are a waste if the table content is obviousobvious

Keep cell content short, long content can Keep cell content short, long content can cause too much vertical scrolling to read cause too much vertical scrolling to read the tablethe table


Changing the table style gives it a different Changing the table style gives it a different feel, can easily experiment with this using feel, can easily experiment with this using style sheetsstyle sheets

Hyperlinks are used to:Hyperlinks are used to: Load another fileLoad another file Move within the current fileMove within the current file Dial a phone numberDial a phone number Send an emailSend an email


Linking within the same file is a useful Linking within the same file is a useful techniquetechnique

Divide the file into several logical screens, Divide the file into several logical screens, could contain related informationcould contain related information

Can then jump from one logical screen to Can then jump from one logical screen to anotheranother

Happens quickly since a new file doesn’t Happens quickly since a new file doesn’t need to be downloadedneed to be downloaded


In theory this sounds easy, but in practice In theory this sounds easy, but in practice it takes a lot of planningit takes a lot of planning

Need to have blank space on the xhtml Need to have blank space on the xhtml page between the logical screens, don’t page between the logical screens, don’t want to see part of next screen while on want to see part of next screen while on current screencurrent screen

Amount of blank space will vary from Amount of blank space will vary from phone to phone, need to do a lot of phone to phone, need to do a lot of experimentationexperimentation


On Nokia phones links can appear on On Nokia phones links can appear on Option menu, look like commands, easy to Option menu, look like commands, easy to get toget to

Access keys can be associated with links, Access keys can be associated with links, one of the phone keys (numbers 0-9)one of the phone keys (numbers 0-9)

When key pressed the browser will When key pressed the browser will transfer to the link, fast access to a screentransfer to the link, fast access to a screen

Doesn’t work on all phonesDoesn’t work on all phones


Don’t underline regular text, users will Don’t underline regular text, users will think it’s a hyperlinkthink it’s a hyperlink

Users can’t mouse over text to see if it’s a Users can’t mouse over text to see if it’s a link, like on a PC browser, so underlined link, like on a PC browser, so underlined text will confusetext will confuse

Don’t remove underline style from Don’t remove underline style from hyperlinks, users won’t know that they can hyperlinks, users won’t know that they can select itselect it


Forms can be used to collect information Forms can be used to collect information from the userfrom the user

Works in basically the same way as html Works in basically the same way as html forms, and could probably be used with forms, and could probably be used with the same scriptsthe same scripts

Collects information from the contained Collects information from the contained elements and sends it to the server for elements and sends it to the server for processing, gets a new page back in processing, gets a new page back in returnreturn


Most of the standard input elements can Most of the standard input elements can be used including:be used including: TextText CheckboxCheckbox Radio buttonsRadio buttons Text areaText area SelectionSelection HiddenHidden


When designing a form keep the following When designing a form keep the following in mind:in mind: Reduce text entry as much as possibleReduce text entry as much as possible Use defaults to reduce the number of user Use defaults to reduce the number of user

actionsactions No unnecessary labels and text, don’t want No unnecessary labels and text, don’t want

the user to scroll too muchthe user to scroll too much Just collect the necessary dataJust collect the necessary data


You can use hidden elements to store You can use hidden elements to store state between pagesstate between pages

Example: customer number, so we know Example: customer number, so we know what they have orderedwhat they have ordered

You should keep this to a minimum since it You should keep this to a minimum since it will be sent to the phone for each pagewill be sent to the phone for each page

Remember people are paying by the Remember people are paying by the minute or KByte for access to your service minute or KByte for access to your service


With forms need to write scripts for the With forms need to write scripts for the server to process the informationserver to process the information

Usually done with CGI, but there are Usually done with CGI, but there are packages that can do some of this for youpackages that can do some of this for you

You may need a programmer to help with You may need a programmer to help with thisthis

Also need to work with ISP to ensure they Also need to work with ISP to ensure they can run the scriptscan run the scripts

JavaJava

Why would we want to use Java and not Why would we want to use Java and not xHTML?xHTML? Application is too complex for xHTMLApplication is too complex for xHTML Dynamic application, lots of screen updatesDynamic application, lots of screen updates Application requires a lot of computations, Application requires a lot of computations,

better to do on the devicebetter to do on the device An xHTML application would require too much An xHTML application would require too much

network bandwidth, would take too long or network bandwidth, would take too long or cost the user too muchcost the user too much

JavaJava

Why not use some other language or Why not use some other language or package?package? Java is already available on most phones, Java is already available on most phones,

don’t need to download a plugin, saves user don’t need to download a plugin, saves user time and moneytime and money

As developer, we can assume its there, As developer, we can assume its there, makes our job simplermakes our job simpler

Run on most modern phones, PDAs and even Run on most modern phones, PDAs and even on Lego, write the code onceon Lego, write the code once

JavaJava

Not going to force you to do Java Not going to force you to do Java programming, but if you are interested you programming, but if you are interested you can give it a trycan give it a try

Need to understand the process of running Need to understand the process of running a Java application on a mobile devicea Java application on a mobile device

Need to know what can be done in Java, Need to know what can be done in Java, whether your application can use it, whether your application can use it, whether its easywhether its easy

JavaJava

Will look at the MIDP profile, widely Will look at the MIDP profile, widely available, but not the only oneavailable, but not the only one

A MIDP based Java application will run on A MIDP based Java application will run on the widest variety of devicesthe widest variety of devices

Start by looking at the process of loading Start by looking at the process of loading and running a Java application, then look and running a Java application, then look at the design elements that Java gives usat the design elements that Java gives us

Java ApplicationsJava Applications

How do Java applications get onto a How do Java applications get onto a mobile device?mobile device?

Lets start with phonesLets start with phones As a developer we produce two files:As a developer we produce two files:

1.1. Jar: this file contains the program and Jar: this file contains the program and anything it needs (images, sounds, etc)anything it needs (images, sounds, etc)

2.2. Jad: a text file that describes your Jad: a text file that describes your application, name, version, size, author, etcapplication, name, version, size, author, etc


When the user requests the application, When the user requests the application, the phone tries to download itthe phone tries to download it

First it checks the Jad file:First it checks the Jad file: Will the program fit on this device?Will the program fit on this device? Do we already have this program?Do we already have this program?

The Jad file is small, and can save time The Jad file is small, and can save time and money if the application is too large, and money if the application is too large, or we already have itor we already have it


Next the Jar file is downloaded and stored Next the Jar file is downloaded and stored on the device, as long as we have enough on the device, as long as we have enough memory it only needs to be downloaded memory it only needs to be downloaded once (different from xHTML applications)once (different from xHTML applications)

For PDAs the process is a bit simpler, For PDAs the process is a bit simpler, usually the files are just copied from a PCusually the files are just copied from a PC

Need to have a small program that starts Need to have a small program that starts Java with our programJava with our program


A MIDP application is called a MIDlet, a A MIDP application is called a MIDlet, a program designed to work with a phoneprogram designed to work with a phone

Only one application can run at a time, Only one application can run at a time, have control of the screen, but we want to have control of the screen, but we want to switch between applicationsswitch between applications

When applications switch, the old When applications switch, the old application keeps track of its data, can application keeps track of its data, can quickly switch back and continuequickly switch back and continue


How do MIDlets do this?How do MIDlets do this? All MIDlets have three standard All MIDlets have three standard

procedures:procedures:1.1. startApp() – called when the application startApp() – called when the application

should start runningshould start running

2.2. pauseApp() – called when we switch to pauseApp() – called when we switch to another applicationanother application

3.3. destroyApp() – called when the user want to destroyApp() – called when the user want to quit the applicationquit the application


When our application starts, the phone will When our application starts, the phone will call startApp()call startApp()

When applications switch, pauseApp() is When applications switch, pauseApp() is called, when the user switches back to this called, when the user switches back to this application startApp() is called againapplication startApp() is called again

This is an organized way of passing This is an organized way of passing control between applications, works control between applications, works around the limitation of one application around the limitation of one application running at a timerunning at a time


Like xHTML, MIDP is screen orientedLike xHTML, MIDP is screen oriented An application can have any number of An application can have any number of

screens, but only one is displayed at a screens, but only one is displayed at a timetime

Program switches between screens based Program switches between screens based on user actionson user actions

Screen limited to width of display screen, Screen limited to width of display screen, but can scroll verticallybut can scroll vertically


With Java we get more freedom in how we With Java we get more freedom in how we format the screen, depending upon what format the screen, depending upon what packages we usepackages we use

The high level library based on the Screen The high level library based on the Screen class produces interfaces similar to class produces interfaces similar to xHTMLxHTML

We have a title, the screen contents and We have a title, the screen contents and then some soft keys for navigationthen some soft keys for navigation


Pressing the next button gets us to the Pressing the next button gets us to the next screennext screen

This screen has a list of commands, that This screen has a list of commands, that end up on a soft key menuend up on a soft key menu

Two of these commands take us to alerts Two of these commands take us to alerts that produce short information screensthat produce short information screens

Note: this may end up looking different on Note: this may end up looking different on other versions of MIDPother versions of MIDP


There is a problem with this design, the There is a problem with this design, the user must click the menu key to see the user must click the menu key to see the optionsoptions

A list screen solves this problem, we can A list screen solves this problem, we can give it a set of names to construct a menu give it a set of names to construct a menu fromfrom

Unfortunately, this takes up screen space, Unfortunately, this takes up screen space, so there are tradeoffs involvedso there are tradeoffs involved


Information can be collected from users Information can be collected from users using standard elements:using standard elements: Text fieldsText fields Text areasText areas Check boxesCheck boxes Radio boxesRadio boxes DatesDates Progress metersProgress meters


This example has a ticker across the top This example has a ticker across the top of the screen requesting informationof the screen requesting information

The ticker element is the width of the The ticker element is the width of the screen and scrolls its contents across the screen and scrolls its contents across the screenscreen

There are two text fields on this form that There are two text fields on this form that collect the name and address of the usercollect the name and address of the user

This info is saved in the programThis info is saved in the program


An information alert is then used to verify An information alert is then used to verify the information and thank the userthe information and thank the user

Check boxes and radio buttons look Check boxes and radio buttons look basically the same as xHTML and behave basically the same as xHTML and behave in the same wayin the same way

The date and progress meters are The date and progress meters are interesting and worth taking a look atinteresting and worth taking a look at


On some implements of MIDP the date On some implements of MIDP the date element is a calendar or clock, element is a calendar or clock, unfortunately in the emulator it’s a simple unfortunately in the emulator it’s a simple entry fieldentry field

A gauge element can be used to show A gauge element can be used to show progress, or even enter a valueprogress, or even enter a value

It can be used to show the progress of a It can be used to show the progress of a download or computationdownload or computation


The emulator shows a relatively primitive The emulator shows a relatively primitive progress bar, other implementations may progress bar, other implementations may show better onesshow better ones

The user can click on either end of the bar The user can click on either end of the bar to change the valueto change the value

This could be used to enter a numeric This could be used to enter a numeric valuevalue

ExamplesExamples

To see what can be done its worth taking To see what can be done its worth taking a look at what others have donea look at what others have done

Most mobile service companies provide Most mobile service companies provide downloads and have previews and short downloads and have previews and short descriptions of the applicationsdescriptions of the applications

Take a look at some of the local ones, see Take a look at some of the local ones, see what they currently have on offer, and how what they currently have on offer, and how much they charge for themmuch they charge for them

ExamplesExamples

There are some good web sites showing There are some good web sites showing different types of gamesdifferent types of games

Open of the better ones is Open of the better ones is http://www.handy-games.comhttp://www.handy-games.com

They have a variety of games for different They have a variety of games for different types of services, such as Java, WAP, types of services, such as Java, WAP, MMS and i-modeMMS and i-mode

Java GamesJava Games

1805 French Empire

1941 Frozen Front

Java GamesJava Games

Ice Racer

MMS GameMMS Game

ExamplesExamples

Another site with a Another site with a collection of games collection of games on it is on it is http://www.wirelessgahttp://www.wirelessgames.commes.com

Fast and Furious a Fast and Furious a racing gameracing game

ExamplesExamples

Arkanoid

ExamplesExamples

Another well known Another well known mobile game mobile game company is Dwango company is Dwango http://www.dwango.cohttp://www.dwango.comm

Here is their Aqua-X Here is their Aqua-X gamegame

ExamplesExamples

Dwango Racing

ExamplesExamples

Cocoasoft Cocktail Manager, and SMS based Cocoasoft Cocktail Manager, and SMS based program for cocktail recipesprogram for cocktail recipes

ExamplesExamples

Eon the Dragon

ExamplesExamples

Mobile Grand Prix

sm3121 design for small devices mark green school of creative media

Documents