Download What is a Mobile Device? - Makerere University E

Lecture 8
Overview
 Hypertext, hypermedia
 The WWW
 Animation and video
 Applications
 Mobile devices
Introduction
 Increase in computing power led to the rapid growth
of multimedia industry.
 There was great change from having static info being
displayed to the display of moving images.
Multi-Sensory Systems
 More than one sensory channel in interaction
 e.g. sounds, text, hypertext, animation, video, gestures, vision
 Used in a range of applications:
 particularly good for users with special needs

consideration:







speech
non-speech sounds
Auditory icons
handwriting
text and hypertext
animation and video
WWW
Multi-modal versus Multi-media
Multi-modal systems
• use more than one sense (or mode ) of interaction
• e.g. visual and aural senses: a text processor may speak the
words as well as echoing them to the screen
Multi-media systems
• use a number of different media to communicate information
• e.g. a computer-based teaching system: may use
•video,
•animation,
•text and
•still images:
different media all using the visual mode of interaction. may also
use sounds, both speech and non-speech:
two more media, now using a different mode.
Text and Hypertext
• The idea for hypertext (where documents are linked to related documents) is
credited to Vannevar Bush's famous MEMEX idea from 1945.
• Tim Berners-Lee used the hypertext idea to create the World Wide Web in 1990 at
the government-funded European Particle Physics Laboratory (CERN). Mosaic, the
first popular hypertext browser for the World-Wide Web was developed at the Univ.
of Illinois' National Center for Supercomputer Applications (NCSA).
Text is a common form of output, and very useful in many situations
• imposes a strict linear progression on the reader,
the author’s ideas of what is best - this may not be ideal
Hypertext structures blocks of text into a mesh or network that can be
traversed in many different ways
• allows a user to follow their own path through information
• hypertext systems comprise:
- a number of pages, and
- links, that allow one page to be accessed from another
Hypertext
Non-linear
bookmark
home
this is text
or is it
hypertext
only links
can tell
this is text
or is it
hypertext
only links
can tell
this is text
or is it
hypertext
only links
can tell
this is text
or is it
hypertext
only links
can tell
this is text
or is it
hypertext
only links
can tell
back link
external
link
this is text
or is it
hypertext
only links
can tell
this is text
or is it
hypertext
only links
can tell
this is text
or is it
hypertext
only links
can tell
Hypermedia
They allow user oriented access to
info and support browsing.
Hypermedia systems are hypertext systems that incorporate
additional media, such as illustrations, photographs, video and sound
Particularly useful for educational purposes
• animation and graphics allow user to see things happen
• hypertext structure allows users to explore at their own pace
Problems
• “lost in hyperspace” - users unsure where in the web there are
maps of the hypertext are a partial solution
• incomplete coverage of information
some routes through the hypertext miss critical chunks
• difficult to print out and take away printed documents
Examples: Microsoft windows help, Sun guide system, HyperCard
help
Web Basics …
 Protocols and browsers, web servers
and clients, networking
 the ‘web’ – protocols and standards
 HTTP – to carry information over
the internet
 HTML, XML and graphics formats
for content
 browsers to view the results …
plus plug-ins
 changing use
 initially research (CERN - high
energy physics)
 now corporate, government,
commerce
and entertainment, advertising,
community
The WWW
Best known multimedia hypertext
system
Offers an environment for the
presentation of information, also act as
effective interactive tools.
The Web supports;
•Hypertext
•Graphics, icons, photos,
background,…….
•Sound & movies (dynamic
materials)
•Uses HTML to structure & describe
the information.
 challenges
 lost in hyperspace, information
overload
HTML is ……
WWW Design Focus
HCI design focus;
informative,
interactive,
attractive and
easier to use sites.
Consider:
•Underlying
limitations/capabilities of the
medium: (both human and
computer)
•The user as a central
focus of the design.
•Webpage design
supported by HTML
•Web protocols
Message and medium:
1.
2.
3.
Content
Attractive pages (page layout)
Information structure (navigation)
• Allow User to be in control
• Hierarchical structure
• Navigation buttons (home,………..)
4.
Text (style, font, color,…….background…,
alignment, ….
Graphics; (take long to load), formats,
purpose,…
Icons;
Movies and sound; video clips – sound?
Networking - think about download time,
connection time, feedback,
Web color
5.
6.
7.
8.
9.
the message and the medium
 “content is king”
 the catch phrase of dot.com era … but widely ignored
 the message … content should be
 appropriate to the audience, timely, reliable , ….
 generally worth reading !
 the medium … page and site design
 good design – essential to attract readers
… but won’t hide bad material!
 bad design – may mean good material never seen
 printable!
Text
text style
generic styles universal: serif, sans, fixed, bold, italic
specific fonts too, but vary between platforms
cascading style sheets (CSS) for fine control
… but beware older browsers and fixed font sizes
colour … often abused!
positioning
easy .. left, right justified or centred
precise positioning with DHTML … but beware platforms
…
screen size
mathematics … needs special fonts, layout,
Graphics
• use with care …
– N.B. file size and download time …
this image = 1000 words of text
– affected by size, number of colours, file format
– backgrounds … often add little, hard to read text
• speeding it up
– caching – reuse same graphics
– progressive formats:
• image appears in low res and gets clearer
Formats
•JPEG – for photos-higher compression but ‘lossy’
get ‘artefacts’
•GIF for sharp edges-lossless compression
•PNG supported by current web browsers
•and action
animated gifs for simple animations
image maps for images you can click on
Icons
• on the web just small images
– for bullets, decoration
– or to link to other pages
– lots available!
• design … just like any interface
– need to be understood
– designed as collection to fit …
Web Color
• how many colours?
– PC monitors – millions – 24 bits per pixel
… but the ‘same’ colour may look very different
• N.B. usually only 72–96 dpi
– older computers, PDAs, phones …
• perhaps only 16 bits or 8 bits per pixel … 256
colours
• or even greyscale
• colour palettes
– choose useful 256 colours
– different choices, but Netscape ‘web safe’ 216 are
common
– each GIF image has its own palette – use for fast
download
Movies & Sound
• problems
– size and download… like graphics but worse!
– may need special plug-ins
– audio not so bad, some compact formats (MIDI)
• streaming video
– play while downloading
– can be used for ‘broadcast’ radio or TV
Animation
 adding motion to images
 for things that change in time



digital faces – seconds tick past or warp into the next
analogue face – hands sweep around the clock face
live displays: e.g. current system load
 for showing status and progress



flashing carat at text entry location
busy cursors (hour-glass, clock, spinning disc)
progress bars
Animation
 for education and training
 let students see things happen … as well as being interesting
and entertaining images in their own right
 for data visualisation
 abrupt and smooth changes in multi-dimensional data
visualised using animated, coloured surfaces
 complex molecules and their interactions more easily
understood when they are rotated and viewed on the screen
 for animated characters
 wizards and help
Utilizing animation and video
Animation and video are potentially powerful tools
• notice the success of television and arcade games
However, the standard approaches to interface design do not take
into account the full possibilities of such media
We will probably only start to reap the full benefit from this
technology when we have much more experience.
We also need to learn from the masters of this new art form:
interface designers will need to acquire the skills of film makers
and cartoonists as well as artists and writers.
Video & Audio
•now easy to author
•tools to edit sound & video and burn CDs & DVDs
•easy to embed in web pages
•standard formats (QuickTime, MP3)
•still big … but getting manageable
•memory OK … hand held MP3 players, TiVo etc.
•but download time needs care – tell users how big!
•very linear
•hard to add ‘links’ often best as small clips or background
Issues
Audio: annoying if unwanted,
Delivery Technology
•on the computer
•help systems installed on hard disk with applications
•CD-ROM or DVD based hypermedia
•on the web
•really ubiquitous!
•in many countries, near universal internet access
•not just web pages!
•e.g. many applications have web-based
documentation
•mobile phones, PDAs, laptop computers
•delivery
CD-ROM or DVD (like desktop)
cached content (e.g. AvantGo)
WiFi access points or mobile phone networks
WAP – for mobile phone, tiny web-like pages
Applications of WWW
 rapid prototyping
 create live storyboards
 mock-up interaction using links
 help and documentation
 allows hierarchical contents,
keyword search or browsing
 just in time learning

what you want when you want it
(e.g. technical manual for a
photocopier)


technical words linked to their
definition in a glossary
links between similar photocopiers
 education
 animation and graphics allow
students to see things happen
 sound adds atmosphere and
means diagrams can be looked
at while hearing explanation
 non-linear structure allows
students to explore at their own
pace
 e-learning


letting education out of the
classroom!!
e.g. eClass
eClass
(formerly Classroom 2000)
an ordinary lecture?
slides, pen
marks, video
are ‘captured’
... available later
through web
interface
Lost in Hyper Space
•non-linear structure
very powerful …
but potentially confusing
•two aspects of lostness
cognition and content
•fragmentary information – no integration …
confusion
•navigation and structure
hyperlinks move across structure – where am I?
no easy solutions
but good design helps!
Making Navigation Easier
•maps
•give an overview of the structure
•show current location – you are here!
•recommended routes
•guided tour or bus tour metaphor
•linear path through non-linear structure
•levels of access
•summary then progressive depth
•supporting printing!
•needs linearised content, links back to
source
History & Bookmarks
• Revisiting
hub and spoke’ access – click-back-click-back
lots of revisiting of pages
back’ is 30% of all browser navigation
but multi-step back and history used less
bookmarks and favourites for longer term
revisiting
• Deep links
bookmarks and external links – into heart of site
are pages self explanatory? what site? where in
it?
• Frames
difficult to bookmark, search and link to
but some good reasons for use (see
/e3/online/frames/)
Indices, Directories & Search
• Index
often found in help, documentation, … even books
selective: not an exhaustive list of words used
•Directories
on web index would be huge! so hand chosen sites
e.g. open directory project, Yahoo!
•Web search engines
‘crawl’ the web following links from page to page
build full word index (but ignore common ‘stop’
words)
looks up in index when you enter keywords to find
pages
Mobile devices
Mobile Web
The Mobile Web refers to the use of Internet-connected
applications, or browser-based access to the Internet from a
mobile device, such as a smart phone or tablet computer,
connected to a wireless network.
What is a Mobile Device?
A mobile device, which is also referred to as a handheld,
handheld device or handheld computer, is a pint-sized
computing device. Mobile devices usually come with a touch
or non-touch display screen and sometimes, even a mini
keyboard.
What Makes a Mobile Device?
Highly Portable
 Can be carried in a
pocket or purse
 It's a constant
companion
Small Display
Used in a public setting
 Whereas PCs are used in
a private setting
One per person
 vs. multiple PCs for
home and work that are
shared with others
Mobile
•Small screen - little information to
view at once
•Mobile - even while the task is being
done
•Limited tasks - user expects to perform
emergency, quick, focused tasks to keep
him mobile
Non-Mobile
•Large screen - lots of information to
view at once
•Stationary - at least for the task being
done
•All inclusive - user expects to perform
any task to get the job done.
Usability guidelines for websites on mobile
devices
Reduce the amount of content
Not everything shown on a PC site can fit reasonably onto
a mobile web page, where space is short and every pixel
counts. It's important to reduce the amount of content
shown on the mobile-optimized version.
Carefully select content: Tailor the content specifically to
the target user group by displaying only the most essential
data.
Usability guidelines for websites on mobile
devices
Single column layouts work best
Wide web pages are difficult to view on small mobile
phone screens. Even on smart phones like the iPhone with
their relatively large screens standard web pages load up
zoomed out so that they can fit on the screen.
Instead, create single column pages that use up the whole
width of the screen.
To add additional content the page should expand
downwards rather than across, as scrolling down is easier
than scrolling across.
Usability guidelines for websites on mobile
devices
Limit graphics: Graphics are an excellent way to spice up
a Web site, but their use is questionable when working with
small screens. Also, many handheld devices feature
monochrome displays, so rich color graphics are lost.
Minimize text entry
Entering text onto websites using mobile phones is much
more difficult than when using a desktop or laptop
keyboard. It stands to reason, then, that users don't want to
have to type as much on mobile websites.
Ways to reduce the amount of text
entry
Ways to reduce the amount of text entry required include:
Allowing users to use stored details in their 'My Account'
section when going through a mobile checkout experience
e.g. picking from previously entered delivery addresses.
Asking users to enter a PIN instead of a password.
Take advantage of inbuilt functionality.
Design for mobile browsers
A mobile browser, also called a microbrowser, minibrowser, or
wireless internet browser (WIB), is a web browser designed for
use on a mobile device such as a mobile phone or PDA.
Mobile browsers are optimized so as to display Web content most
effectively for small screens on portable devices.
Mobile browser software must be small and efficient to
accommodate the low memory capacity and low-bandwidth of
wireless handheld devices.
The Good of Mobile Design
Probably the best thing about mobile web design is the
mobility.
Anyone, anywhere can access the Web in the palm of
their hands anytime that they want.
There is no demand of sitting at a big desk to surf the
Internet anymore.
Another advantage about mobile web design becoming
more popular is it opens a whole new door up to new
and existing clients for web developers.
The Bad of Mobile Design
Some of the disadvantages to surfing the web on a cell
phone or mobile device is its small screen size, and
slower loading time.
Web browsing is a lot different on a cell phone than a
computer.
Developers need to figure out how to design a page
that is attractive even in a small area and still give the
same info the user needs.
Mobile Website and an App
A mobile website is similar to any other
website in that it consists of browser-based
HTML pages that are linked together and
accessed over the Internet (for mobile typically
WiFi or 3G or 4G networks). The obvious
characteristic that distinguishes a mobile
website from a standard website is the fact that
it is designed for the smaller handheld display
and touch-screen interface.
Mobile Website and an App
Apps are actual applications that are
downloaded and installed on your mobile
device, rather than being rendered within a
browser. Users visit device-specific portals such
as Apple’s App Store, Android Market, or
Blackberry App World in order to find and
download apps for a given operating system.
Which is Better – an App or a Mobile
Website?
The most appropriate choice really depends on your end goals.
If you are developing an interactive game an app is probably
going to be your best option.
But if your goal is to offer mobile-friendly content to the widest
possible audience then a mobile website is probably the way to
go.
Generally speaking, a mobile website should be considered your
first step in developing a mobile web presence, whereas an app
is useful for developing an application for a very specific
purpose that cannot be effectively accomplished via a web
browser.
Advantages of a Mobile Website vs. Native Apps
Immediacy – Mobile Websites Are Instantly Available
A mobile website is instantly accessible to users via a browser across a
range of devices (iPhone, Android, BlackBerry, etc). Apps on the other
hand require the user to first download and install the app from an app
marketplace before the content or application can be viewed
Compatibility – Mobile Websites are Compatible Across Devices
A single mobile website can reach users across many different types of
mobile devices, whereas native apps require a separate version to be
developed for each type of device.
Reach – Mobile Websites Have Broader Reach
Because a mobile website is accessible across platforms and can be easily
shared among users, as well as search engines, it has far greater reach
capability than a native app.
Advantages of a Mobile Website vs. Native Apps
A Mobile Website Can be an App!
Just like a standard website, mobile websites can be developed as
database-driven web applications that act very much like native apps. A
mobile web application can be a practical alternative to native app
development.
Time and Cost - Mobile Websites are Easier and Less Expensive
Last but certainly not least, mobile website development is considerably
more time and cost-effective than development of a native app, especially
if you need to have a presence on different platforms (requiring
development of multiple apps).
Constraints of designing for Mobile Devices
 The constraints of mobile devices make them a challenging platform
to design for. The constraints include:
 limited input controls (keys, keypad) and small screen size.
 Also, devices by different manufacturers or with different navigation
approaches have varying configurations. Often a service needs to be
designed for multiple devices and that adds complexity for designers.
Additional Constraints in developing countries
 When designing and implementing mobile solutions for developing
countries, the interaction designers must consider a wide range of
challenges beyond technical issues, such as:
 Illiteracy or semi-illiteracy among users.
 Low computer literacy, i.e. no or highly limited knowledge prior knowledge of




computer interfaces and established metaphors and paradigms like folders, drop
down menus.
Language barriers and dialects.
Physical impairment of users.
Social and cultural differences resulting in different mental models and patterns.
Economic constraints.
WAP - web on the phone
N.B. larger screens
and faster
connections mean
WML giving way to
small HTML pages
 very small screen
 scrolling painful  small ‘pages’
 GSM connection slow  big chunks
 WML (wireless mark-up language)
 content delivered in ‘stacks’ of ‘cards’
 cards are the ‘pages’ the user views
 but navigation within the stack fast
syuh
syuh how
how gtw
gtw
hsio
hsio ii ert
ert ag
ag ty
ty
ghn ty
ty we
we ghty
ghty
syuh how gtw
ghn
chdi
syuh
oatyf
how
hsio i ert ag ty
chdi qw
qw
syuh
oatyf
how gtw
gtw
wet dfla
dfla
hsioght
ght
ert
ag ty
ty
ghn ty we ghty
wet
hsio
ii ert
aa ag
ghn
ty
we
ghty
chdi qw
syuh
oatyf
how gtw
ghn ty we ghty
chdi qw
qw
syuh
oatyf
how gtw
hsioght
i ert
a ag ty
chdi
syuh
oatyf
how
gtw wet dfla
wet
dfla
hsio
ght
i
ert
a
ag
ty
ghn
ty
we ghty
wet dfla
hsio
ghti ert
a ag ty
ghn ty
ty we
we ghty
ghty
chdi qw
syuh
oatyf
how gtw
ghn
chdi
wet dfla
hsio
ghti ert
a ag ty
chdi qw
qw oatyf
oatyf
wet dfla
dfla ght
ght aa
ghn ty we ghty
wet
chdi qw oatyf
wet dfla ght a
navigation within stack fast
server sends whole stack
using WAP protocol
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsioght
i ert
a ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsio
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsioght
i ert
a ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsio
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsioght
i ert
a ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsio
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsioght
i ert
a ag ty
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsio
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
server stores ‘stacks’ of cards
errata: book says stacks of ‘notes’, cards is correct
References
 1. Bush, V., "As We May Think." The Atlantic Monthly,
1945. 176(July): pp. 101-108. Reprinted and discussed in
interactions, 3(2), Mar 1996, pp. 35-67.
 2. Nielsen, J., Multimedia and Hypertext: the Internet
and Beyond. 1995, Boston: Academic Press
Professional.