Direct manipulation

1
Direct manipulation

• Designing the universitys library website using
  Direct manipulation
• Proposal 18

2
What do you need to do?

• Need to design a concept ional model for the
  universitys librarys website for the interface
  using direct manipulation.
• Revamp the website to make it easier for people
  who are not familiar with the websites interface
  to navigate through the website using objects
  which are used in real life to relate to their
  purpose on the website.
• Making the website simpler to the user via direct
  manipulation
• What is direct manipulation?
• Continuous representation of the objects in
  interest. Uses physical actions (such as
  grasping, dragging, pressing buttons) used
  instead of commands. The actions of the user on
  these objects are instantly visible. This is as
  opposed to a command line interface where the
  user needs to type a command in for the user to
  get to what they want

3
Tasks the user will be doing

• Searching for books by their attributes i.e.
  title or author
• Updating their personal record with the library
• Renewing the books they have on loan with the
  library
• Reserving books to pick up the next day

4
Searching

• On the main page there should be just an object
  to click to go straight to a new page dedicated
  to searching for a book and not on the current
  system where there are different buttons
  directing to different pages depending how they
  want to search by because it can be more
  confusing to the user.
• Instead of having it search the entire
  collection, the page should be advanced having
  a combo box for the user to select how he/she
  want to search by, then selecting where they want
  to search in (such as journals, theses etc) so
  that the user does not need to go through a
  series of pages to establish that. Its more
  direct to the user.

5
Personal Records

• Personal records should direct them to page to
  login. Once logged in the system, the information
  should be laid out in a folder style of
  information, having personal information on one
  tab, books loaned out on another, account details
  on another etc.
• The personal records information should be in
  boxes which you can directly edit, instead of you
  needing to go to another page to update it.
• When exiting out of this text box, the page
  should auto update whats in the box now with the
  database, instead of the user needing to press
  update to make the changes.

6
Renewing books

• Object on the interface to direct the user to a
  new page displaying all the books that are on
  loan with the user in order of when they are due
  back. The books that are out on loan should be
  represented as an object (picture of a book)
  which can be dragged along the screen into a
  basket with a recycle symbol (show the user the
  basket is for books the user wants to renew).
  Once the book is dropped into the basket then
  the page auto updates the books due back time.
• It will be linked to the users personal
  information folder interface.

7
Reserving books

• Once the user has finished searching for the
  books, then the user can drag the books name into
  a shopping basket to put the books in
  reservation. Once the user is happy with the
  selection the user should click on the shopping
  basket and it bring to a new page. If the book
  is already on loan or is not available to be
  taken out of the library then the books name
  cannot be dragged and a large cross appears over
  the book name making it clear its not available
  for loan. If the user is not happy with his/hers
  selection then they can edit the selection by
  dragging the books name into a bin allowing the
  user to rid of the book.
• Once the user is happy with the selection then
  the user can press a button representing a
  checkout. They should then login and collect the
  books from the library within the time allocated.
  

8
Metaphor for interface

• The interface is built round the conception of a
  bookcase.
• For search there will be a magnifying glass on
  the bookcase, which is a button that directs the
  user to a new page.
• For personal information held by the library to
  view and edit, the user must pluck out the folder
  from the bookcase to view the information, like
  real life. In the interface this will proceed to
  a new page. When the user closes the folder, the
  interface goes back to the bookcase.
• In search the user picks the books that was
  displayed in a bookcase to be reserved. The user
  can pluck the books from the bookcase and into a
  shopping basket. The user can then reserve he/she
  s selection.

9
Why a bookcase?

• People relate to bookcases being in libraries and
  containing books in general. If the user wants to
  take out a book then he / she will need to pluck
  it out from the bookcase, just like real life.
  Personal information is stored in a book and
  for people to read and amend their personal
  information they need to get the book and open
  it.
• Book case is used as a metaphor and I propose to
  base the interface around it. It is simple and
  most users will know what it is used to
  represent.
• The magnifying glass is used to represent
  searching for books, which takes the user to
  another page allowing them to for a new book.

10
Interface design

• The interface will be of a bookcase at the start
  of the page. There will be two clickable links.
  The pointer will turn into a magnifying glass
  when the pointer is over the books. When the user
  clicks, the user will be transported to the
  search page.
• There will be a row of folders on the bookcase as
  well, used to represent the users personal
  information. When they click on these folders,
  they will be directed to a new page with all the
  users personal information on it.
• At the end of the search, the books will be
  listed in a column, with their name next to them.
  The user can drag these books into a basket using
  the pointer. In a small page of the screen, the
  user is shown what's in his basket. When the book
  is moved into the basket, the book is removed and
  the book is added to the basket list.
• When the user clicks on the folders, the user
  will be directed to a new page, where they can
  view and edit their information such as personal
  details, book loans etc. this is sorted out in a
  folder file system way, where personal
  information is on one tab, loans is on another.

11
Mappings

• How the user performs it - removing a
  book from the library
• How the interface performs it - user has to move
  the book from the columned bookcase
  and into a basket to take the book
• How the user performs it - if the book
  not there on the bookcase, it cannot be loaned
• How the interface performs it - if the user
  tries to move a book that is not available to be
  loaned then the user
  cannot move the book with the pointer and a
  cross appears over the box
• How the user performs it - edit their
  personal information they use edit their record
  for that type of information in a folder.
• How the interface performs it - the user clicks
  on folders, then selects the tabs user wants
  to view he/she s details and edits the
  information. The information is
  automatically updated