Human Computer Interaction
Human Computer Interaction
(HUCID)
Page 1 of 39
HUCID – Conference Information System
Conference Finder
Table of Figures
Figure 1 - Initial draw of the design plan ........................................................................................................................ 3
Figure 2 - Requirements summary .................................................................................................................................. 4
Figure 3 - Conference Information System ‘walk-in and use’ workflow diagram (Abstract) ........................................... 6
Figure 4 - First visual attempt of the device.................................................................................................................... 7
Figure 5 - Memorability test graph ................................................................................................................................. 7
Figure 6 - Usability questionnaire results ....................................................................................................................... 8
Figure 7 - Usability questionnaire results (continued) .................................................................................................... 9
Figure 8 - Walk & Use System main page of the CIF (Left); 'Keyboard Overlay' when user type for search (Right) ...... 10
Figure 9 – (Alternative tablet version) Main page of the CIF (Left); 'Keyboard Overlay' when user type for search
(Right) ........................................................................................................................................................................... 10
Figure 10 – Walk & Use system Terms of services (left) and Privacy Policy (right) pages ............................................. 10
Figure 11 – (Alternative tablet version) Terms of services (left) and Privacy Policy (right) pages................................. 11
Figure 12 – Search results (Left); Conference Details (Right) ........................................................................................ 11
Figure 13 – (Alternative tablet version) Search results (Left); Conference Details (Right) ............................................ 11
Figure 14 - Speakers List (Left); Speaker Profile (Right) ................................................................................................ 12
Figure 15 - Speakers List (Left); Speaker Profile (Right) ................................................................................................ 12
Figure 16 – Digitally rendered device with interface .................................................................................................... 12
Figure 17 – Main screen embedded device (Left); Main screen tablet device (Right) .................................................. 13
Figure 18 - Enhanced search results for the users who prefer rich visual search results .............................................. 13
Figure 19 - Simplified search results, when 'Basic Search Results' option is activated ................................................. 14
Figure 20 – Simplified conference details page ............................................................................................................ 14
Figure 21 – Multiple options of sharing location (When ‘DIRECTIONS’ button is pressed [Figure 20]) ......................... 15
Figure 22 - Enhanced Speaker List (Search) .................................................................................................................. 15
Figure 23 - Basic Speaker List (Search) .......................................................................................................................... 16
Figure 24 – Speaker Profile ........................................................................................................................................... 16
Figure 25 – Speaker Profile ........................................................................................................................................... 17
Figure 26 – Speaker Profile (Alternative) ...................................................................................................................... 17
Figure 27 - High fidelity prototyping with Axure (Left); Axure design and output side by side (Right) ......................... 18
Figure 28 - Main screen of the system .......................................................................................................................... 18
Figure 29 – On-screen keyboard ................................................................................................................................... 19
Figure 30 – Enhanced search results/browsing of conferences .................................................................................... 19
Figure 31 – Simplified search results/browsing of conferences .................................................................................... 20
Figure 32 – Conference details ..................................................................................................................................... 20
Figure 33 – Alternative conference details where venue details are as a pop-up window ........................................... 21
Figure 34 – Popup window of conference details ......................................................................................................... 21
Figure 35 - Sharing location process and confirmation ................................................................................................. 22
Figure 36 - Usability lab test ......................................................................................................................................... 23
Figure 37 - Scenario fragment....................................................................................................................................... 30
Figure 38 - Admin Menu - Creating a Conference (Conference Tab) ............................................................................ 32
Figure 39 - Admin Menu - Creating a Conference (Conference Tab) ............................................................................ 32
Figure 40 - Admin Menu - Creating a Conference (Pictures Tab) .................................................................................. 32
Figure 41 - Admin Menu - Creating a Conference (Location Tab) ................................................................................. 32
Figure 42 - Admin Menu - Creating a Conference (Links Tab) ....................................................................................... 32
Figure 43 - Admin Menu - Creating a Conference (Speaker Tab) .................................................................................. 32
Figure 44 - Admin Menu - Creating a Conference (Tickets-Free) .................................................................................. 33
Figure 45 - Admin Menu - Creating a Conference (Tickets-Paid) .................................................................................. 33
Figure 46 - Admin Menu - Creating a Conference (Tickets-Open Doors) ...................................................................... 33
Figure 47 - Usability questionnaire sample ................................................................................................................... 38
Figure 48 - Summary of evaluation using "Think aloud protocol" ................................................................................ 39
Page 2 of 39
HUCID – Conference Information System
Conference Finder
Conference Information System (CIS)
~ Conference Finder ~
Abstract
This project deals with a conference management system for a university where users can view the details of
a conference at the university, including the room location where the conference will be held, participant guests and
speakers accessing an interface that will be used on a large stand touch screen.
Introduction
Scope
The main focus of this project is to design a conference information system (CIS) that will assist the user in
getting around a widespread university campus with the application offering several features that would benefit the
user in a potentially unknown city or environment. The user will most likely be from a professional or academic
background but with different levels of technological awareness.
The project scope is to create a simple but intuitive user interface, where the user will be able to plan to which
conferences, they may want to attend by having an overview of the available conferences, speakers and guests. In
addition, the system will offer interactive directions for the first-time visitors and points of interest around the
university.
Project Goals
Methodology
Project Description
• Open free access without need of registrations aimed for front end access with search and browsing
functionality.
o Users can find useful information about available conferences and/or useful locations around the
venue location. Speaker’s profiles are available for search along with their past published works (e.g.
books, journals)
o Conference Location & Details available for print out
o Notifications
Page 4 of 39
HUCID – Conference Information System
Conference Finder
o Booking
• Registered users (only for tablet/phone) which include all above functionalities along with access to
notifications, bookings and possibility to add conferences to different calendars (e.g. Google calendar, iCalendar etc.).
Registered users are further divided into 2 categories of users groups with different access levels:
o Conference participant – user group with minimum access to the system information. Users assigned
to this group can book a place (or purchase a ticket through 3rd party system) to a conference and receive
notifications about incoming events.
o Conference speaker – user group with all above privileges and with a personal profile page where
they can upload their photo, relevant documents, self-description profile or links to their works.
• Admin area access (briefly covered in this paper) is the systems part where all conferences and system
settings are handled. Please see additional designs section:
o Conference planner
o User Management
o Notifications
o Other administrative tasks
Usability
The Usability Engineering Life Cycle Helps the designers and developers to build a good, fully functioning and
reliable solution with the aid of its set of stages. According to Nielsen given below are the stages of the usability life
cycle model (Nielsen, 1993).
Figure 3 - Conference Information System ‘walk-in and use’ workflow diagram (Abstract)
Page 6 of 39
HUCID – Conference Information System
Conference Finder
UI Specifications
User Requirements
For the Conference Finder system, we combined two techniques in order to better understand the user’s
natural behaviour through the application. The first test was conducted as time-based efficiency and memorability.
The initial test was conducted on 7 subjects ages between 18 - 50 with different technical skills. For this test the
subjects were briefly informed about the application goals and a set of printed out mock-ups of the application layouts
were handed in (see Figure 8 to Figure 15 ).
The subjects were asked based on the information they have about the application to put the mock-ups in a
logical order to “find details about a conference”. Each user repeated the same task 5 times and each time required
from start to end to complete the task was recorded. In Figure 5 we can observe that every user improved the time of
completing the task after each use. Also, at the end of the tests each user was asked to complete a short questionnaire
(Figure 6). Several notes were taken when user tested the low fidelity prototype, using talk aloud protocol.
The design methodology used was user-centred design (UCD), where the user took centre-stage into design
and tests were carried to see how the users are likely to interact with the system and use the interface.
Page 7 of 39
HUCID – Conference Information System
Conference Finder
Figure 6 - Usability questionnaire results
Page 8 of 39
HUCID – Conference Information System
Conference Finder
Figure 7 - Usability questionnaire results (continued)
Page 9 of 39
HUCID – Conference Information System
Conference Finder
First iteration of Low-fidelity design
Figure 8 - Walk & Use System main page of the CIF (Left); 'Keyboard Overlay' when user type for search (Right)
Figure 9 – (Alternative tablet version) Main page of the CIF (Left); 'Keyboard Overlay' when user type for search (Right)
Figure 10 – Walk & Use system Terms of services (left) and Privacy Policy (right) pages
Page 10 of 39
HUCID – Conference Information System
Conference Finder
Figure 11 – (Alternative tablet version) Terms of services (left) and Privacy Policy (right) pages
Figure 13 – (Alternative tablet version) Search results (Left); Conference Details (Right)
Page 11 of 39
HUCID – Conference Information System
Conference Finder
Figure 14 - Speakers List (Left); Speaker Profile (Right)
Analysing the feedback given for the digital low fidelity prototypes we receive a couple of suggestions to
change the design, suggestions that are reflected into the second iteration.
• Bold Text
• Brightness
• Text size Figure 16 – Digitally rendered device with interface
• Colourblind mode
• 2 types of search results display (basic and enhanced)
Page 12 of 39
HUCID – Conference Information System
Conference Finder
User Requirements second iteration
Low-fidelity prototype re-design
Figure 17 – Main screen embedded device (Left); Main screen tablet device (Right)
Figure 18 - Enhanced search results for the users who prefer rich visual search results
Page 13 of 39
HUCID – Conference Information System
Conference Finder
Figure 19 - Simplified search results, when 'Basic Search Results' option is activated
Page 14 of 39
HUCID – Conference Information System
Conference Finder
Figure 21 – Multiple options of sharing location (When ‘DIRECTIONS’ button is pressed [Figure 20])
Page 15 of 39
HUCID – Conference Information System
Conference Finder
Figure 23 - Basic Speaker List (Search)
Page 16 of 39
HUCID – Conference Information System
Conference Finder
Figure 25 – Speaker Profile
Page 17 of 39
HUCID – Conference Information System
Conference Finder
High-fidelity prototype design
Figure 27 - High fidelity prototyping with Axure (Left); Axure design and output side by side (Right)
Page 18 of 39
HUCID – Conference Information System
Conference Finder
Figure 29 – On-screen keyboard
Page 19 of 39
HUCID – Conference Information System
Conference Finder
Figure 31 – Simplified search results/browsing of conferences
Page 20 of 39
HUCID – Conference Information System
Conference Finder
Figure 33 – Alternative conference details where venue details are as a pop-up window
Page 21 of 39
HUCID – Conference Information System
Conference Finder
Figure 35 - Sharing location process and confirmation
Note: Our focus was for a walk in and use device. However, during our analysis and design phases we have
designed the interface for mobile phones devices as well. Please see the mobile version design in
Appendices section.
Page 22 of 39
HUCID – Conference Information System
Conference Finder
System design assumptions and decisions
The system design is very much user orientated and keeps true to the university conference management
system description. The design came about with the expectation that the user would have any level of technological
experience from a novice to professional. The system is simple to use and efficient therefore, users can find
information quickly and easily by either browsing the conferences or specifically searching for a speaker or keyword.
It has to be compatible with mobile users as the application was designed to work on mobile devices and walk
up and use touch screen stations. It has to be accessible by all abilities and show considerations for those with
disabilities. It provides descriptive information about the conferences, the speakers, location details and schedule
information. Additionally, it has to show some local information for attendees unfamiliar with the campus which is
achieved by implementing a map feature.
Evaluation
User testing is a critical phase in the design process. The purpose of our research is to gain user
feedback on our proposed Conference Information System (CIS). We hope to understand what users like or
dislike about our system. From here we can see whether the design meets the requirements. Through the use
of paper prototyping combined with a physical mock-up of the device we will give the users a hands-on feel
for our system. Our ideal test will be to take advantage of ‘usability lab’.
A test subject was asked to perform some specific tasks based on a script in a controlled environment. With a
controlled test like this, we were able to compare how a user will carry out the specific tasks. After reading out the
instructions we observed how the user chooses to interact with the device in order to carry out the actions. While the
user is carrying out the tasks, he is encouraged to talk out loud and voice his intentions, especially when he is having
difficulties. This allowed us to better understand their thought process and see the interaction from the user
perspective.
Conclusion
We are considering the project to be successful as 88.9% of users recommended this product during high
fidelity prototype testing. This emphasises the benefit of using low and high-fidelity prototypes. While low fidelity will
give a simple explanation of the concept it is the high-fidelity prototypes that really demonstrate the proposed system.
By using high fidelity prototypes where the user had the feel of using a real application, they found it easy to navigate
through the user interface and buttons. The use of personas was particularly helpful and we were able to tailor the
project to the needs of these users. In addition to the alternative designs used in the low fidelity prototyping phase. The
use of the usability lab was instrumental in witnessing how a user would independently operate our system. We
worked well as a team and we believe that we have produced an effective system for a conference.
Page 23 of 39
HUCID – Conference Information System
Conference Finder
Bibliography
Arnowitz, J., Arent, M., & Berger, N. (2006). Effective Prototyping for Software Makers. San Francisco: Morgan
Kaufmann.
Dix, A., Ormerod, T., Twidale, M., Sas, C., Silva, P. A., & McKnight, L. (2006). Why bad ideas are a good idea.
Proceedings of HCIEd.2006-1 inventivity, 23-24.
Golbeck, J. (2014, Apr 04). What a Toilet Hoax Can Tell Us About the Future of Surveillance. Retrieved from The
Atlantic: https://www.theatlantic.com/technology/archive/2014/04/what-a-toilet-hoax-can-tell-us-about-
the-future-of-surveillance/361408/
Gutierrez, O. (2014, Oct 16). Prototyping techniques for different problem contexts. Retrieved from
ResearchGate.com:
https://www.researchgate.net/publication/234821018_Prototyping_techniques_for_different_problem_con
texts
Harley, A. (2016, Feb 16). Personas Make Users Memorable for Product Team Members. Retrieved from Nielsen
Norman Group.com: https://www.nngroup.com/articles/persona/
Preece, J., Rogers, Y., & Sharp, H. (2015). Interaction design: beyond human-computer interaction. New York: Wiley
publishing.
Unicef. (n.d.). Overview: Data Collection and Analysis Methods in Impact Evaluation. Retrieved from Unicef-irc.org:
https://www.unicef-irc.org/publications/pdf/brief_10_data_collection_analysis_eng.pdf
Usability B.O.K. (n.d.). Cognitive Walkthrough. Retrieved from Usability Body of Knowledge:
https://www.usabilitybok.org/cognitive-walkthrough
Page 24 of 39
HUCID – Conference Information System
Conference Finder
Appendices
Portfolio
Strengths: Weaknesses:
Data that has been evaluated can be Data can be difficult to interpret if not gathered in a suitable
instrumental on future decision processes as it manner or if there are large quantities of data to go through.
allows you to better understand what areas of
the system need to be focused on.
Evaluation:
“Well chosen and well implemented methods for data collection and analysis are essential for all types of
evaluations” (Unicef, n.d.). Without data evaluation we would be making uninformed decisions that could be
counter-productive to the development process.
Strengths: Weaknesses:
Does not require the presence of test subjects. Evaluator likely to have used the system before and be familiar
with how it works, meaning they are not going to provide as
much insight as a new user would.
Can be carried out at any stage in the
development process.
Evaluation:
Cognitive walkthroughs are a useful method for analysing a system from the user’s perspective, however they
should not be relied upon as the only evaluation technique, as data from test subjects should be more insightful.
Page 25 of 39
HUCID – Conference Information System
Conference Finder
Technique: Usability Lab
Strengths: Weaknesses:
Gaze tracker is useful to see which parts of the Test subjects may behave differently as they aware that they
system the user is drawn to, and which parts go are under observation.
unnoticed.
Evaluation:
Usability labs are a valuable tool for identifying areas of a system that may be overlooked by users. The
information gathered from using the lab can be used to fine tune the program to make sure all parts of the system
are clearly presented to the user and that there is no difficulty in finding whatever information they are searching
for.
Strengths: Weaknesses:
The responses are more likely to be unique than Test subject may not consider all areas that you want to look at,
the responses you get in surveys and leaving gaps in your evaluation of the interface. This can be
interviews, as the user is not guided with any mitigated through the use of a script, guiding the test subject on
questions. the areas to look at.
Evaluation:
Verbal protocols are useful for hearing typical users thought process when using the system, this can be useful
when wanting to evaluate whether link names and other areas of the system are clear to the user.
Page 26 of 39
HUCID – Conference Information System
Conference Finder
Portfolio
Competency: Storyboards
Advantages: Disadvantages:
Gives the client or stakeholder a chance to interact Can take time to produce
with the proposed product.
Can result in many scenarios to be created and interacted
Gives the proposed design context with
Low cost
Evaluation:
Similar to a use case diagram in that it describes a process or function involving a user. They are a valuable insight
as to how a user might approach a task especially if the user is not on the team creating the product. Storyboards
can be time consuming and can become over complicated but are a highly effective tool in the design process.
Advantages: Disadvantages:
Offers a visual representation of a proposed product. Amendments can be unlimited and time consuming.
Time efficient to produce Prototype may disappoint stakeholder
Low costs
Can be amended easily
Evaluation:
Paper prototypes can jointly offer pro’s and con’s as a tool but overall, they show that they can be a low-cost time
efficient tool for explaining to a potential client how an application could work and allowing changes based on how
they think they would use the prototype.
Page 27 of 39
HUCID – Conference Information System
Conference Finder
Competency: Personas
Advantages: Disadvantages:
Easy to recruit participants by using the personas for Can require multiple changes to design
usability studies.
Time consuming to develop multiple persona’s
Cost effective where no real participants are
involved. Persona is not real user so cannot give true feedback
Evaluation:
Personas provide an excellent starting point for the designer as to who their users might potentially be and are a
highly useful tool. They can cause many changes to a design with each discovery of a new user requirement
without hard feedback, but overall they provide a speculative and highly valuable insight to points of consideration
about the users experience and lifestyle.
Advantages: Disadvantages:
Page 28 of 39
HUCID – Conference Information System
Conference Finder
Evaluation:
The prospect of starting again or changing the original design can create problems in any project however if this is
done in a way that satisfies user requirements and solves obstacles it can only be a good thing. However, it can be
costly, time consuming, back up designs can become distorted in the process. It is better to use alternative designs
in the initial design phase creating multiple options prior to commencing implementation. Alternative designs are
neither good nor a bad design tool but they should be used with care and not as a last resort.
Page 29 of 39
HUCID – Conference Information System
Conference Finder
Portfolio
Storytelling
After the target users were
identified, in order to
better understand their
requirements, different
personas were created, we
need a story or a journey
of how the users will
potentially experience our
system. Therefore, several
scenarios were created in
order to cover some of the
possible situations of the
system usage.
Storytelling has
lots of benefits for a
product design— it
enhances engagement,
improves user experience,
makes the users become
product advocates by
putting a human face on
dry data and breaking
down complex ideas and Figure 37 - Scenario fragment
making them easier to
comprehend. When it comes to design — it helps the designer to speak easily with the users and create
something that makes users’ life easier and delightful.
However, storytelling can be a laborious process and time consuming. A visual storytelling is a much
faster process than a written one but due to lack of drawing skills the written approach was preferred.
The true beauty of a great design is not on the outside; it lies within the solution that the product
provides.
Paper prototypes
For our first rapid iteration, as a group activity during
brainstorming sessions and before starting to use the Balsamiq to draw the
first digital mock-ups, I have created few versions of the screens logic and
main functions. A very inexpensive method with low commitment where
no one wants to throw out a digital prototype that took hours to create. It’s much easier to throw out a sketch
that takes only 5-minute to create. However, at this stage it was hard to collect feedbacks as the user requires
a great deal of imagination and a lot of additional explanations needs to be provided.
Alternative designs
When initial designs and mockups were drawn, for conference systems, I was trying to find different
problems to the system rather solutions for the given task. This led to several other designs and encouraged
discussions between us and opportunities to perceive the project from different angles and identified a large
Page 30 of 39
HUCID – Conference Information System
Conference Finder
set of constraints related to system functionality. This included for example, additional functionality for
users with sight problems.
Beside the benefits outlined above, this technique also has limitations that need to be mentioned. Indeed, the
proposed type of design brief is particularly relevant for new systems technologies such CIS. For an existing
technology such as the use of the web, there will be the danger that the students will be blinkered by
previous experience of its applications. In such cases, more radical means, for example BadIdeas (Dix, et al.,
2006) may be needed in order to encourage divergent thinking during the exploration phase.
Professionalism
In recent years, there has been increased discussion and debate concerning the role of ethics in HCI
research. HCI research projects have generated controversy due to their purported unethicality (Golbeck,
2014).
Like British Computer Society highlights, professionalism should be a core principle for any person
working in any industry not only in IT environment. Codes, values and ethics must be embraced by anyone
through a collateral consent. Sometimes the professional issues faced as system designer, involves data
protection and privacy. Breaching the legal aspect of data protection entails a professional and ethical issue
as well. As a professional I endeavour to understand the business model, rules, how to interact with users
and potential test subjects at every step of the way in order to be able to offer unbiased and viable solutions
for any issue that may occur. It is my responsibility as a professional to be up to date with latest technologies
and suggest improvements where are available. Following and applying ethical and moral obligations will
ensure the trust and confidence of users, potential clients and any other parties involved. The protection of
the stakeholders should be my primary concern. Just briefly to enumerate some of my moral obligations: to
reduce the effort of collecting repeated and unnecessary collection of data about users, use data
appropriately (e.g. not to sell for profit), to ensure stakeholders continued access to their information, to not
promise more than I can deliver, to not support contractor X, just because I know him and should teach and
share my expertise in order to help to grow the collective knowledge base.
Page 31 of 39
HUCID – Conference Information System
Conference Finder
Additional Designs
Figure 39 - Admin Menu - Creating a Conference (Conference Tab) Figure 38 - Admin Menu - Creating a Conference (Conference Tab)
Figure 41 - Admin Menu - Creating a Conference (Location Tab) Figure 40 - Admin Menu - Creating a Conference (Pictures Tab)
Figure 43 - Admin Menu - Creating a Conference (Speaker Tab) Figure 42 - Admin Menu - Creating a Conference (Links Tab)
Page 32 of 39
HUCID – Conference Information System
Conference Finder
Figure 45 - Admin Menu - Creating a Conference (Tickets-Paid) Figure 44 - Admin Menu - Creating a Conference (Tickets-Free)
Page 33 of 39
HUCID – Conference Information System
Conference Finder
Mobile Version Designs
Main Screen Main Menu (Not logged in) Main Menu (Logged in)
Page 34 of 39
HUCID – Conference Information System
Conference Finder
Sign out Search Notifications
User Profile
Page 35 of 39
HUCID – Conference Information System
Conference Finder
Conference Calendar Adding a review Near Places (Categories)
Page 36 of 39
HUCID – Conference Information System
Conference Finder
Embedded Contact Support User Profile (Alternative)
Page 37 of 39
HUCID – Conference Information System
Conference Finder
Questionnaires samples
Page 38 of 39
HUCID – Conference Information System
Conference Finder
Figure 48 - Summary of evaluation using "Think aloud protocol"
Page 39 of 39
HUCID – Conference Information System
Conference Finder