Background: The
International Children’s Digital Library (ICDL) began as part of a research
project at the University of Maryland, College Park in 2002. It is a free
online library that houses hundreds of children’s books in several languages
from different parts of the world. The website was designed by educators,
artists, psychologists, and information scientists in order to find a way to
facilitate finding books for children who access the site. Though there are now
iPhone (published in 2008) and iPad (published in 2010) versions, the website
was the first presence accessible by phone and still exists today.
The website is an example of bad mobile interface design.
 |
| Figure 1 |
 |
| Figure 2 |
 |
| Figure 3 |
Visibility: Poor
To use the “Simple Search” portion of the website, users
click (or tap) on the circular buttons to refine their search selection and
ultimately find a digital book to read. However, the buttons are so small on
the mobile version, and the text even smaller, that it makes the refining
process extremely difficult for all mobile users, and especially for early
readers.
Second, when the phone is twisted to landscape mode, not all
buttons can be seen, which may result in missed refinement opportunities.
And
last, not all images associated with each refinement circle clearly indicate
what that refinement option does. For example, unless you are also able to
read, the black figures running do not clearly indicate what age grouping each
refinement corresponds to (Figure 3). And second, the “true books” image is a
fish. As there is no logical connection between a fish and a “true book”, it
would be hard to determine a situation in which selecting this option would be
beneficial.
Fix: Reduce the
number of “refinement circles” and place them on a scrolling list on the right
side of the screen. This way, children can scroll with their right hand and
select the refinements they want without blocking a large portion of their
options. It would also allow for larger text and larger images on the screen as
a whole.
An additional fix would be to replace the running child
images with numbers (3-5, 6-9, 10-13), and to find a image for “true” books
that would better visually describe what that refinement means.
Mapping: Moderate
The researchers performed several experiments when they
designed the original interface: http://hcil2.cs.umd.edu/trs/2003-02/2003-02.pdf.
After doing background research on the online digital library landscape and
designing an interface that overcame any shortcomings, they tested the website
with students at an elementary school in Maryland. This lead to a series of
redesigns based on the feedback they received and ultimately lead to the
rectangular design pictured in Figure 1 and 2.
However, this research apparently does not transfer over to
handheld websites where fingers have to be used in place of small mouse
clickers. The mapping design in this instance is more of a nuisance than a
helpful feature—many of the options can be covered up by a hand (as was
discussed in the Visibility section).
Last, while the refinement circles and search results are
easily visible and are prominently placed in the center of the screen,
additional help buttons are not. In Figure 1 there is a “More Choices” button on
the top right of the screen that leads to additional search refinements.
However, this button is not easily seen when the focus, and all essential
buttons, are placed in the center of the screen.
Fix: In addition
to the fixes indicated in the “Visbility” section, the additional search
refinements activated by clicking the “More Choices” button could be added to
this scrolling list. This would eliminate the need for children to click to
access a different search page to accomplish the same task.
Feedback: Poor
According to Norman, feedback is characterized by “sending
back to the user information about what action has actually been done, what
result has been accomplished” in a way that is “immediate and obvious” (Norman
27 & 99). While the search refinement features do provide results, it can
take a very long time for the site to load with each refinement “tap.” This
could be confusing for early users who may not realize that their search is
still loading. It could also be frustrating for in-school use since the wait
time could eat up a student’s free time with the device.
Fix: Update the
script.
Affordances/Constraints:
Good
Figure 2 is an example of what it looks like when
refinements occur. Norman says that a good conceptual model makes the parts
visible and the implications clear. As a mobile device, it is already
inherently clear that things need to be tapped in order to activate them. And
as refinements happen, certain clickable areas are greyed-out and become
inaccessible to children as they narrow their search results. This affordance
of the site has been designed well, and its intention is clear to all
users.
The site has good intentions, but has mostly failed to
transfer over to the mobile world. The same interface problems exist with the
iPad version, which was simply a transferred-over version of the website. In
order to design a fully functional website, new research needs to be done on
how modern students—students who grow up with this technology every day—search
for and use mobile library sites.
No comments:
Post a Comment