What devices can we design for

1
What devices can we design for?

• The Internet is now available to a vast range of
  devices, both static and mobile
• Static
• - WebTV
• - Kiosks
• Mobile
• - Mobile phones
• - Watches
• - PDA devices

2
Specific device issues

• When focusing on different devices, and delivery
  of Internet information clearly many design
  issues are touched upon due to diversity of
  platforms
• Issues of platform specification
• Bear in mind a majority of devices sit well below
  the specification of a desktop PC (or
  touch-screen)
• On a PDA typical memory size may be a lot smaller
  and clock speed a lot slower
• Network connection slow or weak

3
Interaction devices will vary significantly

• Not always the case of using a keyboard, could be
  a roller button, or pen interaction
• Even keyboards may be different size (a mobile
  phone v a standard keyboard v a kiosk)
• Need to take this into consideration when
  deciding how to present material (task
  presentation)
• Laptops can have the same specification of a
  Desktop PC

4
Screen real estate

• Handheld PCs have a screen size of 160x160,
  240x320, 480x320all shapes and sizes
• Compaq iPaq has a screen size of 60x80mm
• can hold 12 icons 4x3 grid, there is no remaining
  space
• Virtual keyboard takes up a 1/3rd of the screen
• Watches and phones clearly use limited real
  estate (typically in the region of an inch, or
  inch and a half)

5
Media presentation capabilities are limited

• Take on board that phones are still limited, PDAs
  and handhelds equally cannot do everything as
  well as a larger device
• That said some can run video, and cut down Flash
  is available
• Also now available on some pricey watches

6
Other Issues

• Presentation of dialogue style
• Software presentation styles need to be cut down,
  in some cases for efficiency, and in others
  adapted from the standard desktop norm
• Output devices
• Desktops evidently can use screen and speakers
• Most PDA style devices the same
• Phones clearly a lower specification
• Environment
• complicates issues as some devices are used
  under difficult conditions (both static and
  mobile)

7
WebTV

• WebTV is a marriage between the Web and TV.
• WebTV provides the ability to surf the Web from
  just about any TV set.
• Set Top Box
• Price is 99 for the basic service called WebTV
  or MSNTV Classic and 199 for the bells and
  whistles version.
• MSN Version http//www.webtv.com/pc/experience/w
  eb.asp has demo
• http//webreference.com/dev/webtv/ good link for
  design tips

8
Resolution for WebTV

• Size of a screen measured in pixels - 544 x 372
  pixel screen size. ( Due to 16 pixels
  horizontally and 48 pixels for the interface)
• Resolution can also refer to the "sharpness or
  clarity of a screen."
• Television screens are not nearly as crisp as
  computer monitors.

9
Designing For Web TV

• WebTV visitors are not sitting 18 inches away
  from their TV, text has to be larger if you want
  it to be readable.
• White, which is very attractive on your computer
  monitor, can be overpowering on WebTV. The same
  holds true for most brightly coloured
  backgrounds.
• Dark backgrounds work better than light
• Many WebTV surfers will be navigating your site
  with a remote control using arrow keys to find
  their way around.
• Designing for WebTV is like taking a giant step
  back to the early '90s!

10
Designing For WebTV

• First, resist using graphics and layouts that
  require wide screens to display properly.
• Images should be small
• The WebTV browser will compress graphics and
  tables to help Web pages fit into a 544 pixel
  space, but overly large and complex layouts can
  be broken in this process.
• However - design for 544 wont work
• The European PAL television standard is 768
  pixels wide Wide screen counterpart is even
  wider
• In the U.S., the HDTV standard will be radically
  different from current American NTSC
  specifications.

11
Designing For WebTV

• Choose a layout that doesn't rely on fixed
  widths, but uses percentages of the screen.
• Use "white space" allowing your site to take
  advantage of larger displays without compromising
  itself on smaller ones.
• Be aware that the relative "blurriness" of the TV
  screen will wash out the finer detail in
  graphics.
• Avoid embedding critical information, such as
  links or navigational elements, in small images.
• Some problem with tables
• Frames not popular and target not supported
• Good multimedia support

12
Monitor vs WebTV

• Only about a quarter of what appears
• on monitor will display on TV screen
• because of font requirements

13
Designing For Web TV
14
WebTV and Interactive TV

• The WebTV browser can be used in two different
  modes.
• Normal Web pages are always displayed in Web
  mode.
• page scrolling is enabled and status bar.
• TV mode is used to display Interactive TV pages.
• TV mode does not allow scrolling (the screen
  dimensions are a fixed size of 560 pixels wide x
  420 pixels high) and no status bar.
• TV mode also allows you to display, size, and
  position the TV broadcast anywhere on the page by
  declaring the TV tag as an object or image.

15
KISS Keep It Simple Silly

• Keep your site design simple and functional.
• Design to the WebTV Classic user.
• Keep your copy short and to the point.
• Avoid using bright colours for text as the text
  may bleed (flare).
• Be aware that certain colours, such as pure red,
  don't display well on WebTV.
• WebTV Classic comes with a 33K modem WebTV Plus
  comes with a 56K modem.
• If a site works in Netscape 3 or Explorer 3, it
  will probably work on WebTV.

16
Interactive TV

• Digital Services
• BBC - http//www.bbc.co.uk/digital/tv/
• Sky - http//www1.sky.com/skyactive/homepage/index
  .html
• NTL via Interactive Services - http//www.ntlhome.
  com/ntl_tv/interactive.html

17
Kiosks

• Seen in public places.
• Used mainly for multimedia displays
• Can run off the internet/intranet
• Market researchers Frost and Sullivan say the
  number of Kiosks in use worldwide will increase
  by an average 27.5 per year from 1997-2004
• Screen (14 to 17)
• Touch sensitive screen or keypad
• Stereo Sound

18
Kiosks

• Designing kiosk interfaces is not the same as
  designing web pages.
• Kiosk software designers must always keep the
  ergonomic factors of human interaction in mind.
• Screens must be laid out in a clear and simple
  manner with intuitive ease of use specifically
  designed in.
• Touch selectable areas need to be large enough
  for big fingers and sensitive enough for little
  ones.

19
Wireless Communications - Now

• Wireless Application Protocol (WAP)
• communication protocols that standardise the way
  mobiles can be used for Internet access
• i-Mode
• the worlds first "smart phone" for Web browsing,
  first introduced in Japan provides colour and
  video over telephone sets
• http//www.nttdocomo.com/corebiz/imode/what/index.
  html
• Wi-fi
• Short range
• Limited coverage

20
What is WAP

• Short for the Wireless Application Protocol, a
  secure specification that allows users to access
  information instantly via handheld wireless
  devices such as mobile phones, pagers, two-way
  radios, smartphones and communicators.
• http//www.webopedia.com/TERM/W/WAP.html

21
History Of WAP

• Phone.com, Ericsson, Nokia and many others began
  developing independent standards
• Made more sense to focus development around a
  common standard
• Goal was to establish a common format for
  Internet transfers to mobile telephones

22
Problems

• Devices are poorly designed and have a difficult
  user interface. Inputting text is a pretty clumsy
  business.
• The mobile's screen can only display a few
  characters
• Reliable Wireless Networks - WAP gateways suffer
  from high downtimes, and assuming that end-users
  do get through, calls can dropped easily.
• Lack of roaming across multiple networks
• No Instant Connectivity
• Bandwidth still limited

23
So Why Bother

• Everyone knows that mobile phones are prolific
• Sending web pages to your mobile phone is a
  gimic!
• Surely it wont last very long! isnt WAP dead
• Were it only mobile phones I would agree with
  youWe would look at the standard only as a
  historical point BUT WAP is the De FACTO
  standard for mobile DEVICES
• Whichever way the future moves the key is
  Convergence
• WAP applies not only to Phones but also to PDAs,
  Pagers and Other wireless devices
• It is likely to be the way these things
  communicate in the short term at any rate

24
(No Transcript)
25
Advancement Of Mobile Devices

• From
• Mobile Phones and PDAs
• To
• Smart Phones with web browser capability
• Communicators Like Nokia Devices
• Phones with integrated video / mp3 player

26
Mobile Devices

• PDA
• simple graphical displays
• character recognition
• simplified WWW

• Laptop
• fully functional
• standard applications

• Pager
• receive only
• tiny displays
• simple text messages

Sensors, embedded controllers

• Palmtop
• tiny keyboard
• simple versions of standard applications

• Mobile phones
• voice, data
• simple text displays

performance
27
The good side.

• always on connectivity enables users to be
  updated on events (whats on), their location,
  and routes for reaching their destination.
• End-users will use their devices to
• read their local newspaper abroad,
• to make purchases
• or simply use it to figure out more about a
  particular product they are interested in.

28
The good side

• Widespread adoption will foster the concept of
  communities on the move with dynamic
  communication occurring
• between family members, friends
• people that share an interest
• this will drive advanced forms of messaging.

29
The bad side.When?

• European consumer will have to wait for at least
  another four to five years to experience mobile
  audio streaming of songs or video streaming of
  short movies to be available conveniently at
  affordable prices.
• Main reason for this is that the network will
  reach a realistic data rate of only around 40
  kbps towards the beginning of 2003, rather than
  the promised transmission speeds of 2 mbps with
  UMTS ( Universal Mobile Telecommunications System
  ).
• Bandwidth limitations will be alleviated largely
  only by the introduction of 4G after 2008/2010.

30
Mobile Communications - Speed
31
Mobile Computing Capability

• Small screen
• Ranging from the poor graphics of the mobile
  phone to good graphics of the PDA
• Add-on hardware like MP3 players, cameras
• Small amount of storage
• Limited processing power
• Short battery life

32
Mobile phones

• Pixel based graphics (e.g. logos)
• Main form of interaction excluding
• speech is buttons (and roller button)
• Interfaces and interaction needs to be designed
  primarily for one handed operation

33
Watches

• Can now get watches with web connectivity (most
  experimental)
• Capable of television reception as well
• In principle powerful media display
• Clearly though connectivity is an issue
• Need magnifying facilities for web connection or
  limit media presentation to simple textual pages
  (same as phone)

34
PDA devices

• Full colour/or mono graphics (Greys)
• Good screen resolutions
• Screen is restricted
• Interaction in form of pen, keyboard, speech
• Can support most desktop media although overall
  specification is a problem e.g. memory
• Typical styles hand pad or a handheld
• Expected to be operated via both hands, possibly
  located on a desk

35
Effective interface design for mobile devices

• Most guidelines derived directly from HCI and
  other disciplines
• Need to design with a definite structure and
  organization
• Watch screen real estate as you do not have
  much and things soon become cluttered (e.g. menus
  over running the users workspace)
• Use consistency where possible, some devices
  adopt this by having set interaction and work
  areas related to either the hardware or software
  of the device

36
Effective interface design for mobile devices

• Produce cut down sites. Work out what is needed
  and do no more. (be efficient)
• Never try to replicate an application on a PDA or
  phone as interface styles will cause interaction
  bottlenecks making the interaction process
  ineffective
• May in principle need to totally redesign the
  interface and software functionality