what devices can we design for
Download
Skip this Video
Download Presentation
What devices can we design for?

Loading in 2 Seconds...

play fullscreen
1 / 36

Designing for different devices - PowerPoint PPT Presentation


  • 472 Views
  • Uploaded on

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. Specific device issues.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Designing for different devices' - mike_john


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
what devices can we design for
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

Faculty of Computing Engineering and Technology

specific device issues
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

Faculty of Computing Engineering and Technology

interaction devices will vary significantly
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

Faculty of Computing Engineering and Technology

screen real estate
Screen real estate
  • Handheld PCs have a screen size of 160x160, 240x320, 480x320…all 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)

Faculty of Computing Engineering and Technology

media presentation capabilities are limited
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

Faculty of Computing Engineering and Technology

other issues
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)

Faculty of Computing Engineering and Technology

webtv
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/web.asp has demo
  • http://webreference.com/dev/webtv/ good link for design tips

Faculty of Computing Engineering and Technology

resolution for webtv
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.

Faculty of Computing Engineering and Technology

designing for web tv
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!

Faculty of Computing Engineering and Technology

designing for webtv
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 won’t 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.

Faculty of Computing Engineering and Technology

designing for webtv11
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

Faculty of Computing Engineering and Technology

monitor vs webtv
Monitor vs WebTV

Only about a quarter of what appears

on monitor will display on TV screen

because of font requirements

Faculty of Computing Engineering and Technology

designing for web tv13
Designing For Web TV

Faculty of Computing Engineering and Technology

webtv and interactive tv
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.

Faculty of Computing Engineering and Technology

kiss keep it simple silly
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.

Faculty of Computing Engineering and Technology

interactive tv
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

Faculty of Computing Engineering and Technology

kiosks
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

Faculty of Computing Engineering and Technology

kiosks18
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.

Faculty of Computing Engineering and Technology

wireless communications now
Wireless Communications - Now
  • Wireless Application Protocol (WAP)
    • communication protocols that standardise the way mobiles can be used for Internet access
  • i-Mode
    • the world’s 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

Faculty of Computing Engineering and Technology

what is wap
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

Faculty of Computing Engineering and Technology

history of wap
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

Faculty of Computing Engineering and Technology

problems
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

Faculty of Computing Engineering and Technology

so why bother
So Why Bother
  • Everyone knows that mobile phones are prolific
  • Sending web pages to your mobile phone is a gimic!
  • Surely it won’t last very long! – isn’t WAP dead…
  • Were it only mobile phones I would agree with you…We 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 PDA’s, Pagers and “Other” wireless devices
    • It is likely to be the way these things communicate in the short term at any rate

Faculty of Computing Engineering and Technology

advancement of mobile devices
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

Faculty of Computing Engineering and Technology

mobile devices
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

Faculty of Computing Engineering and Technology

the good side
The good side….
  • always on’ connectivity enables users to be updated on events (what’s 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.

Faculty of Computing Engineering and Technology

the good side28
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.

Faculty of Computing Engineering and Technology

the bad side when
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.

Faculty of Computing Engineering and Technology

mobile communications speed
Mobile Communications - Speed

Faculty of Computing Engineering and Technology

mobile computing capability
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

Faculty of Computing Engineering and Technology

mobile phones
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

Faculty of Computing Engineering and Technology

watches
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)

Faculty of Computing Engineering and Technology

pda devices
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

Faculty of Computing Engineering and Technology

effective interface design for mobile devices
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

Faculty of Computing Engineering and Technology

effective interface design for mobile devices36
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

Faculty of Computing Engineering and Technology

ad