Mobile Interaction Design

Document Sample
Mobile Interaction Design Powered By Docstoc
					Richard Byrne (366455)            Mobile Interaction Design: Phase 2

                  Mobile Interaction Design

                         Coursework 2

                         Richard Byrne

                          11 May 2008

  Richard Byrne (366455)                             Mobile Interaction Design: Phase 2

  Part 1:
  Adding a new Automatic Update:
  The user first logs into the system on the login screen. Upon entering login details the
  user is then taken to the welcome screen where they are presented with a series of
  options. Either scrolling through these options and pressing „select‟, or by pressing the
  corresponding number on the keypad, will progress them to that section. Below is shown
  the process of adding a new automatic update called “to Uni”:

As is shown when the user logs in they are shown the main menu screen.

Selecting the Automatic Updates option takes them to the Automatic
Updates screen, where they can select to „Add Update‟.

The user enters information about the update they wish to add, the type of
update, in order for the device to know which sensors to use (location for
example may just make use of GPS information, where as activity will
make use of accelerometer details as well as location…).

The user can then save the update and is shown a confirmation screen to
confirm that the new update has been added.

At any point pressing the left hand menu button will progress the
program backwards (back, back/cancel, logout and quit which ends the
application), returning the user to the previous form unless otherwise
shown (such as pressing ok on the confirmation returning the user
directly to the Automatic Update menu)
Richard Byrne (366455)                             Mobile Interaction Design: Phase 2

From this point forwards all screenshots will just be of the form view shown on the
screen (and in some cases additional buttons) and not of the entire phone.

Editing an Existing Automatic Update:

From the Automatic Update screen the user can also select „Edit Update‟ which
progresses them to the Edit Update screen. Here they can choose an existing update to
either edit or delete by cycling through the combo box until they reach the name of the
update they wish to edit. Below is shown the process of editing and deleting the
„Running in the park‟ update:

                                              Cycling left or right with this combo box selects
                                              different automatic updates that you can edit. The
                                              editable section and description of what is updated is
                                              displayed beneath in the section highlighted in
                                              green. You can select this area by pressing „down‟
                                              on the control pad of the phone and edit it that way.

                                              Pressing the „Save/Delete‟ menu button will bring
                                              up two further commands where you specify if you
                                              wish to save edited information, or delete the update
                                              all together. Clicking save (or pressing the
                                              corresponding key pad numeric key) will present a
                                              message to say that the update has been saved and
                                              you are returned to the previous screen.

                                              Pressing „Delete‟ brings up a confirmation message
                                              whereby the user can press „yes‟ to confirm the
                                              deletion, or „no‟ to cancel the deletion process.

                                              If the user does press „yes‟ then a message stating
                                              that the update has been deleted is displayed and that
                                              specific update is deleted. Pressing „no‟ returns the
                                              user to the previous screen.

Richard Byrne (366455)                            Mobile Interaction Design: Phase 2

Editing Automatic Update Settings:
From the Automatic Updates screen the user can also choose to view the Automatic
Update settings by selecting „Settings‟ from the menu:

                                           The Settings option allows the user to control what
                                           automatic updates are turned on, and the frequency
                                           the updates will be made. By selecting either „On‟
                                           or „Off‟ by pressing the corresponding number, the
                                           user can quickly turn all automatic updates on or off.
                                           Alternatively the user can chose individual update
                                           categories to turn on or off by also pressing their

                                           The user can change the frequency by scrolling
                                           down and editing, in minutes, how often they wish
                                           the automatic updates to be made.

                                           Pressing save will bring a confirmation dialogue box
                                           stating that all changes have been saved and the user
                                           is returned to the Automatic Updates screen.

Manual Update:
From the Welcome screen a User can select to send a Manual Update by selecting
„Manual Update‟ from the list of options or by pressing the number „2‟ on the keypad:

                                             The user can enter any text up to 140 characters
                                             into the text box, and then click „Update‟ to send
                                             an update whereby a confirmation message will
                                             state the update has been sent. The characters left
                                             count counts down to alert the user to how many
                                             characters are left and is simulating the limited
                                             characters allowed for entry in text messages and
                                             current social networking tools.

                                             „Cancel‟ returns the user to the Welcome screen.

Richard Byrne (366455)                             Mobile Interaction Design: Phase 2

View Updates:

Selecting „View Updates‟ from the Welcome screen allows the user to view both their
recent updates and their friend‟s recent updates. They can view their friends updates by
pressing „Friends Updates‟, they can then return to view their updates by pressing „Your

The user can scroll through the list by pressing up or down on the key pad. If they use
left or right they can expand the text in order to read the entire update in an easier

                                                            The user can then click „Done‟ to
                                                            return to viewing the updates.

Richard Byrne (366455)                               Mobile Interaction Design: Phase 2

View/Edit Profile:
View profile allows the user to view their profile, they can expand the information boxes
in the same way they can in the View Updates section above. Pressing „Edit‟ allows the
user to edit their information, and to then save it. This process is shown bellow:

As with all other sections pressing the „Back‟ or „Cancel‟ menu options performs the
inferred action, either returning the user to the previous screen, or cancelling the edit

View Friends:
Selecting „View Friends‟ takes you to the Friends section where the user can view
information about their current friends. The user can select which friend they wish to
view details for by scrolling through the list and can then view the details in the same
way as the other information can be viewed in the previous two sections, View Updates
and View/Edit profile:

Richard Byrne (366455)                              Mobile Interaction Design: Phase 2

Part 2
Whilst designing the phone interface several usability guidelines were followed, in
particular those given in the course text: Mobile Interaction Design [1, pp. 44 - 45] as
guidelines for the Golden Rules of Design by Ben Shneiderman:

Strive for Consistency:

Each form of the application is laid out in the same way, with a title at the top describing
which section the user is currently on, and two context sensitive menu buttons at the
bottom of the majority of the forms. These menu buttons are laid out so that pressing the
right button will move the user forward, to the next level of the section they wish to look
at (e.g. on the Welcome Screen pressing select when highlighting Automatic Updates will
move the user to the Automatic Updates screen), and pressing the left button, normally
called either „Back‟ or „Cancel‟ will move the user backwards a step.

Enable frequent users to use shortcuts

Each menu screen (such as Welcome and Automatic Updates) has a corresponding
number next to the menu option. This allows users the ability to either quickly select an
option by pressing the corresponding number on the keypad, or new users to still scroll
through the options and progress to that section by pressing „Select‟. The Settings page
of the Automatic Updates section also has corresponding numbers in order to allow a
familiar user to quickly turn these options on and off with only a few keystrokes (from
the Welcome screen to the Automatic Updates -> Settings screen).

Offer informative feedback:

When a user performs a task such as saving settings or editing details a confirmation
dialogue is shown relating directly to the event that they have carried out (stating
specifically which update or information has been changed). In addition on the Edit
Update form where the user can edit or delete automatic updates, an alert message
appears when the user requests to delete something and another message if they chose to
delete the update saying which update was deleted.

Design dialogues to yield closure:

There is a structure to each task the user carries out. For example to add a new
Automatic update the user selects Automatic Updates on the welcome screen, then Add
Update from the Automatic Update screen and is given a confirmation dialogue that their
new update is added, before being returned to the Automatic Update screen. This gives a
clear flow as the user progresses through this stage and creates a sense of closure when
the task is completed, and doesn‟t make them wonder what the next action should be or if
the task is completed. This is also true for the other stages outlined in part1, the user is
never left stranded in a part of the system that they cannot get out of, or are left
wondering what is happening.

Richard Byrne (366455)                               Mobile Interaction Design: Phase 2

Strive to prevent errors, and help users to recover quickly from them:

The frequency of updates text box on the „Automatic Updates -> Settings‟ form only
allows users to enter numeric values into the text box, in order to ensure that no text is
mistakenly entered.

Allow ‘undo’:

On each screen is a „Back‟ or „Cancel‟ button. This allows a user to change their mind
when performing a certain task and return to the previous screen and void any changes
made to the current one. When entering information into text boxes the user can also use
the „Back Arrow‟ button on the phone itself to delete what they have typed.

Make users feel they are in control of a responsive system:

Small file sizes are used for the photos that are displayed in the „View Profile‟ and „View
Updates‟ forms to ensure fast loading times. The rest of the forms are all text based and
no fancy backgrounds or images are used to ensure fast loading times of each form and to
ensure that a quick and responsive system is maintained at all times.

Reduce short-term memory load:

The menus and options are all kept as small and compact as possible to ensure the user is
not overburdened with information and choices. Each section is only three screens deep
too so the user is not confused as to where in the system they are. Each form also clearly
states which section it belongs to, such as „Automatic Updates -> Edit ‟ which appears at
the top of the edit automatic update form, clearly shows that „Edit‟ is part of the
„Automatic Update‟ section. This ensures the user doesn‟t lose where they are or that
they are never too far from the main „Welcome‟ screen. By creating clearly defined
sections and menus the system is easy to navigate.

The system also adheres to Don Norman’s rules of usability:

Ensure a high degree of visibility:
This is achieved by having a clear menu structure and not overloading the screens with
information. The user is able to see all available options at all times, and in the instants
where the information cannot be displayed on one screen a vertical scroll bar visually
illustrates to the user that you can move up and down on the current screen by pressing
the corresponding key pad buttons (up and down).

Provide feedback:
The system, as stated, provides messages to the user in order for them to know if a
specific command such as editing or deleting information has been successfully achieved
or not.

Richard Byrne (366455)                             Mobile Interaction Design: Phase 2

Present a good conceptual model:
Each form contains a title at the top stating what the form is, and where in relation to
related forms it lies, for example „Automatic Updates -> Add Updates‟ implies that the
user is on the „Add Update‟ form, which is a sub part of the „Automatic Update‟ section.

As stated each menu option on the phones main menu buttons are the same on each form,
with the left performing actions to take you backwards through the system, and the right
taken you forwards by either selecting a new form, or performing a specific action, such
as Add, Edit or Delete. This presents the user with a clear indication of how to navigate
through the system.

Offer good mappings:
This is achieved by related specific numeric keys to specific options in the menus and on
the „Automatic Updates -> Settings‟ form.

Part 3:

There were several influences in the design of the prototype, the main influences being
existing mobile phones that I have used and in particular my current phone, the Sony
Ericsson k750i. On this particular phone a consistent layout is present throughout and in
particular the context sensitive menu buttons also maintain a level of similarity on every
form. Different to my prototype however these context sensitive buttons often use the
left menu button as the „Select‟ button and the right menu button as the cancel, or further
options button (such as „More‟ to display more options). When creating my prototype I
believed it better to have the right button as the „Select‟ button and the left as a
„Back/Cancel‟ button. The reason as stated previously, being that it created a sense of
flow, and much like reading, by moving left to right created a sense of progression, where
moving to the right can be viewed as moving forward, and therefore left as moving
backwards. By using a similar layout and incorporating the standard features available
on most mobile phones (selection pad, two context sensitive menu buttons, back/delete
arrow) it ensures a user will quickly be able to familiarise themselves with how to use the
basic components of the system.

Following the principles outlined in chapters 8 – 10 of Mobile Interaction Design [1] also
helped to influence the decisions made when designing the interface. For instance all
menus are structured in a categorical way to ensure that they do not span too many lines
and that the user is not overburdened with information. This also ensures that the user
does not have to scroll through long menus, or use one line menu systems to navigate to
the section they want to. The system employs a hierarchical menu system which
achieves these aims. Although initially it may take the user some time to familiarise
themselves with the levels, clearly labelled sections ensure that they shouldn‟t feel too
lost at any time whilst navigating the system. In addition there are only two menus to cut
down on confusion, the main menu on the „Welcome‟ screen and the Automatic Update
menu on the screen of the same name.

Richard Byrne (366455)                              Mobile Interaction Design: Phase 2

Chapter 9 of Mobile Interaction Design [1] speaks of simplicity. In the notion that users
may at times only wish to see small chunks of information and have the choice to view
this information in more detail. This was another factor considered when designing
screens that would hold potentially lots of information. In particular the profile and
update screens. The user is only shown part of the information and can chose by
selecting a specific update or text box if they wish to view something in more detail,
which will then bring the information up in a separate screen. This allows users to
quickly browse through updates or glance at their profile, and ensures that the space
taken is kept to a minimum unless the user specifically requests that they wish to view
one of these aspects in more detail.

Finally I employed the tactic of auto-ethnography. Stepping away from the design at
every stage and analysing how I, as a user and not as a designer, would feel about using a
particular design I had come up with. This can be a dangerous process in the sense that,
as the original designer, you are aware of how the system should work, and what the
functionality is. However I purposefully stepped away after completing each design, to
come back at a later stage to see if I could still easily tell what each page meant, and how
the full functionality of the system fitted together. This proved useful in allowing me to
correct errors or tweak the design in areas that I had not originally seen. I also
continuously asked myself questions such as “How would I turn this update off” or “How
do I few my friends recent updates”, if I could complete these tasks with ease I was
satisfied that my design was just, and again, stepping away from the role of designer
would attempt to distance myself as much as possible from the system, and approach it
purely in the role of a potential user.

Richard Byrne (366455)                              Mobile Interaction Design: Phase 2

Part 4: Conclusion
Throughout the design process and development cycle I have learned a great deal with
regards to interaction design and use with the small screen. Most notably is the lack of
space that is available in comparison to a desktop, or laptop computer display. On the
large screen menus can be long and complex, the Windows Start Menu for example can
span well over half the screen if you have enough applications and programs installed.
This of course can not be achieved on a mobile device; the ability to construct menus in
this way is simply not feasible. In addition a large screen enables the use of many icons
and images to span the „Desktop‟ allowing the user to create shortcuts to their favourite
folders and files and access them with ease. This is not as much of a possibility on the
small screen and thus the ability to design well laid out menus and well structured
sections is vitally important. This is what I tried to incorporate into my design, ensuring
that the appropriate functions were in east to navigate sections.

The keystrokes themselves also plaid a role in the design process, and I was keen to
ensure that access to a particular feature could be achieved in as few keystrokes as
possible. Again on a desktop computer a simple move and click of the mouse or similar
pointing device can quickly open or navigate to a section, on a phone however only the
keypad and direction pad can be used. As such I employed the use of “quick-keys”
allowing the user to quickly navigate to a section by pressing the options numeric

As a designer I learned the value of stepping away from the design and approaching the
designed system from the view of a potential user. This helped me to greatly alter some
design choices I had made, features I may have included because I believed them to “look
cool” I later removed by following this process by finding that they served no real
purpose and were not necessary and thus distracting to the design.

This high-fidelity version of the prototype differs greatly from the previous low-fidelity
version I produced for phase 1 of the coursework. This low-fidelity paper prototype
employed the use of a PDA style system, and thus allowed me to design for a bigger
screen than the one this high-fidelity phone prototype has. This meant that a lot of the
designs I had previously made had to be adapted and altered when converting to this new
stage. This I believe was also a valuable learning curve, as a designer you can not afford
to get to attached and committed to a design such that you fear having to change it at a
later stage. Part of developing prototypes is to adopt the concept that the design can
potentially change ten-fold by the time the final prototype rolls out, and in some cases
original versions of the design could be abandoned completely, and the prototypes re-
designed from scratch. This is part and parcel of the development phase, and necessary
if as designers we are committed in our drive to create a functional and user friendly
system as an end point. I tried not to allow my own feelings and thoughts influence too
many aspects of the prototype in order to ensure that it would be approachable to many
users, and not just me. Though at points my own feelings were valid when approaching
the design from the viewpoint of a user, and at these times I did take these thoughts, and
indeed my own criticisms on board.

Richard Byrne (366455)                              Mobile Interaction Design: Phase 2

A more advanced and in depth study would of course involve inviting a user group to test
the prototype and then to gather their feedback and refine it based on their various
critiques. However as a tool for developing a commercial interface my prototype would
be useful as an intermediate stage. Designing a prototype first on paper, before moving
to the more high-fidelity approach of creating this prototype still proves cost effective
and efficient. At this stage any serious design flaws can be corrected and adjusted with
relative ease. This is not the case for later versions of the prototype where specialised
hardware may have been produced to accommodate for, and build the design. Finding
design flaws at this later stage could prove dissasterous for the designer and the company
that have hired them to create the design, both in terms of cost and time. Creating and
testing prototypes in the way phase 1 and 2 of the coursework have done are valid and
vital parts of the development process and ultimately prove worthwhile in the long run, to
ensure that the final hardware version is as robust, reliable and well designed as possible.
Of course the reduced and simulated functionality of a computer based emulator
prototype can not be used to predict errors you may receive when incorporating other
hardware, such as the sensors and GPS system that would be used in the final prototype
of this device. As such as a next stage of progression I would obtain a mobile device that
I can use as the next prototype and deploy my current system to that and robustly test it
until satisfied that it works effectively on a mobile device before then advancing to make
a final commercial product.

In summary I have learned a great deal about the development for the small screen whilst
completing this coursework. Ideas and techniques learned from designing fully fledged
desktop applications over the previous years have all proved different to the approach
required in this instance. Designing for a mobile device has proved challenging and
rewarding in the sense that it requires a different approach to what I have usually been
used to, and seeing a final prototype that could potentially be advanced in later
instantiations of the development phase has been exciting. I have also learned what
makes a bad design, and principles and practices to ensure that my designs do not adhere
to these detrimental temptations.

Richard Byrne (366455)                      Mobile Interaction Design: Phase 2


1: Mobile Interaction Design Jones, M. & Marsden, G. Wiley 2006.


Shared By: