HCI-Final-Document

Page | 1
Human Computer Interfaces - 2015
MusikCube
Assignment 01 Report
Group No-16
Submitted by:
IT13010836 – S.Sujeevan
IT13076276 – K.Aarooran
IT13107888 – S.Jeyaprashanth
IT12351114 – M.T.A.Alston

Page | 2
Table of Content
Table of Contents
Table of Content ............................................................................................................................. 2
List of Tables .................................................................................................................................. 3
List of Figures................................................................................................................................. 4
1.0. Introduction.......................................................................................................................... 5
2.0. Abstract................................................................................................................................ 6
3.0. Lab Works............................................................................................................................ 7
4.0. Use Case Diagram.............................................................................................................. 23
5.0. Use Case Scenario.............................................................................................................. 24
6.0. Volere Shell ....................................................................................................................... 27
7.0. User Groups ....................................................................................................................... 30
8.0. Transcript ........................................................................................................................... 31
9.0. Flow Diagram ................................................................................................................... 40
10.0. Artifact Diagram ............................................................................................................... 41
11.0. Proto Type......................................................................................................................... 42
11.1 Paper based prototypes ..................................................................................................... 45
12.0. Meeting Minutes ............................................................................................................... 59
12.1. Meeting 1 ......................................................................................................................... 59
12.2. Meeting 2 ......................................................................................................................... 60
12.3. Meeting 3 ......................................................................................................................... 61
13.0. Individual Work Load...................................................................................................... 62
14.0. Conclusion ....................................................................................................................... 63
15.0. Reference ......................................................................................................................... 64

Page | 3
List of Tables
Table 1: Lab works 1 ...................................................................................................................... 7
Table 2 : Lab works 2 ..................................................................................................................... 8
Table 3 : Lab works 3 ................................................................................................................... 12
Table 4 : Lab works 4 ................................................................................................................... 20
Table 5 : Use case scenario 1........................................................................................................ 24
Table 6: Use case scenario 2......................................................................................................... 25
Table 10 : User group 1 ................................................................................................................ 30
Table 11 : User group 2 ................................................................................................................ 31
Table 12 : Breakdowns ................................................................................................................. 44
Table 13: Individual workload...................................................................................................... 62

Page | 4
List of Figures
Figure 1 Use case Diagram........................................................................................................... 23
Figure 2: Volere 1 ......................................................................................................................... 27
Figure 3: Volere 2 ......................................................................................................................... 28
Figure 4 : Volere 3 ........................................................................................................................ 28
Figure 5 : Volere 4 ........................................................................................................................ 29
Figure 6 : Volere 5 ........................................................................................................................ 29
Figure 7 : Flow Diagram............................................................................................................... 40
Figure 8 : Artifact Diagram 1........................................................................................................ 41
Figure 9 : Artifact Diagram 2....................................................................................................... 41
Figure 10 : Prototype 1 ................................................................................................................. 45
Figure 14 : Prototype 5 ................................................................................................................ 47
Figure 16 : Prototype 7.1 .............................................................................................................. 48
Figure 17 : Prototype 7.2 .............................................................................................................. 48
Figure 20 : Prototype 10 ............................................................................................................... 50

Page | 5
1.0. Introduction
MusikCube is a music application. If you’re not already committed to downloaded music from
the iTunes Music Store, then MusikCube is the best choice available for a music organizer and
player. It organizes your mp3s, makes it really easy and really fast to find them, and allows you
to make some incredibly clever smart playlists.musikCube was a clean, light weight music
library for Windows. It was actively developed between 2003 and 2006. Now it's an abandoned
open source project. In order to design a user interaction for an application MusikCube was
chosen under copy write laws. While using this application many problems were found and those
problems were established by applying Human Computer Interaction concepts.

Page | 6
2.0. Abstract
This document explains clearly about the group assignment for the module Human Computer
Interfaces. The purpose of this document is to provide a clear introduction of software of choice
“MusikCube” and go through our ideas to improve the product.
MusikCube is a music application. It is the best choice available for a music organizer and
player. It organizes your mp3s, makes it really easy and really fast to find them, and allows you
to make some incredibly clever smart playlists.musikCube was a clean, light weight music
library for Windows. And this application does not find easy to use by the users. A team
consisting of four members involved in the project to change this application applying Human
Computer Interaction concepts (HCI).Each team member having one or more roles to
accomplish tasks involve in designing the final product. This document contains the
requirements of the users and design paper prototype for MusikCube.

Page | 7
3.0. Lab Works
1. Examine how the tool has been designed paying particular attention to how the user is
meant to interact with it:
a) From your first impression, write down what first comes to mind as what is good and
bad about the way the tool works?
b) Give description of the user experience resulting from interacting with it.
The way its work Resulting user Experience
Good
 Song file details
can be viewed.
 Sorting
 Dynamic playlists
 Detailed view for
each song file.
 Ascending and
descending order
according to year
and date added.
 Last played, most
played etc.
 Simple.
 Simple
 Neat
 Simple
 Easy to categorize
Table 1: Lab works 1
The Way it works Resulting user Experience
Bad
 Complicated icons  Small and plain colored
icons.
 Unpleasant

Page | 8
 Bad colour choice
 Search bar cannot be
found.
 Cannot find the play bar.
 Too much white space.
 Search button has been
cornered.
 Too small, bad colour
choice.
 Boring
 Frustration
 Annoying
Table 2 : Lab works 2
c) List set of usability goals that you think will be most relevant. Explain why.
• Effective to use: - use pictures for each album (relevant) therefore it is
easy for the user to identify.
• Learnability: - Can use standard icons / buttons to do basic functions.
This will help user to achieve a much better satisfying experience.
• Efficiency: - by allowing user to find songs / playlists according to
certain categories will help user to play the songs that they are
searching for.
d) Translate usability goals in to set of questions.
 Effective to use: -
• How much time does it take to upload one file?
• Maximum number of songs that can be played in a
playlist?
• Maximum volume increase when play a song?
• How much time to take next song play after the current
song?

Page | 9
 Learnability
• How much time user spends to perform basic function?
• How many functions user could accomplish without
spending more than 30 second?
• How long time user take to identify the playing buttons?
• Efficiency
• Can you search songs according to the playlist?
• How much time to take search for a particular song from
the playlist?
e) List set of user experience goals that you think will be most relevant. Explain
why.
• Annoying: There are no attractive things in this applications. Such
as small and not meaningful icons, not effective background and
not attractive playing control buttons.
• Entertaining: It use to spend free time for listening to the music
• Supporting creativity: Can introduce sound effects equalizer and
give animated visualization
• Enhancing Sociability: Can introduce some sharing options to
share favorite songs or high rating songs to social medias
f) Translate user experience goals in to set of questions.
 Annoying
• How is the design of the application?
• Do you find any attractive buttons or functions?
Entertaining
• How long time to spend for listening to the music
through the application?
• How many songs add to the playlist in the
application?

Page | 10
 supporting creativity
• Do you find any effects for equalizer?
• Do you find any visualization effects?
 Enhancing Sociability
 Can you share favorite songs in social
Medias?
 Can you rate your songs in social
Media?
How the tool has been designed paying particular attention to how design principals
used in existing design.
Design Principle Function
Visibility  Repeat : album, track, playlist
 Volume Control
 Position Slider (slide music
player Timer bar )
 Search
 Create Playlist
 Song Rating (using stars)
 Categorize songs by Artist and
Album wise
 Music Play Bar – play songs,
forward, backward songs

Page | 11
Feedback  Shows currently playing song
with album name, author, time
etc.
 Help Menu use to get online
solutions and more details
 Music play bar – which is
highlighted when user press on it
 Notification (Message) – show
currently playing song’s details
when application is minimized
Affordances (Virtual)  Reorder playlist
 Tree view design for left side
category table user need to learn
how to extend and shrink
categories
 Advance Queuing – add song or
album at the end or as next in
playlist
 Reorder songs (sorting songs by
alphabetic, time added etc.)
 Customize the UI design and
color
(Remove extra white spaces, auto
capitalization etc.)
 Equalizer – To Customize the
song’s audio quality and sound
base category

Page | 12
Consistency (Internal)  To do similar functions using
short keys (using ctrl + first letter
of function )
E.g. :- for Add directory - ctrl+d
Play net radio - ctrl + R
Consistency (External)  Music Play bar which is different
between different applications in
MusikCube it has all
buttons(play, shuffle, repeat etc.)
but in other application only play,
forward, backward buttons are
available
E.g. :- ITunes
If you can identify / suggest to use design principals to the existing design, describe what
they are.
1. Visibility: - Use standard icons (more user friendly and understandable icons) for buttons
and standard specific colors for UI design E.g. Playlist, Library, Devices etc.
o Use images for easy to identify the each album or playlist
o Increase the font size and Header size for more visibility and
remove the unnecessary white spaces
o Use larger and effective music play bar. E.g. in side view or top view
Different category
o Use larger search bar, icon and locate the search where it can be easily identified by users
2. Affordance: - reduce the learning things in application

Page | 13
o Use symbols to left side category tree view to increase the user friendly (+ or -).
o Give quick guide (using minimum number of steps) to users when they use this
application at first time (Quick Guide Tour)
3. Feedback: - play a sound clip when song is automatically changed in minimized state of
the application
Explain reasons for your suggestions.
1. In the existing design buttons and icons are not in proper standard and kind of similar
design so we need to use new effective design attractive buttons, icons
2. Increase the size of font, labels, headers, Icons and other design stuffs to increase the
visibility
3. Using images to albums and using larger effective dancing music play bar so user can be
easily identify the songs and the music play bar will increase the user UX
4. Reducing affordance is help to increase the user friendliness and reduce the learning
burden no need to spent more time to learning so user can be familiar with this
application easily
5. Quickly tour guide gives quick guide lines to the users about the application so users
easily understand the functionality of that applications

Page | 14
Explain how significant requirement gathering activities to your project.
Requirement gathering is an essential part of any project and project management. Especially
for our project because our project is social, entertainment related thing and also it has wide
range of user levels. Understanding fully what a project will deliver is critical to its success.
This may sound like common sense, but surprisingly it’s an area that is often given far too
little attention.
Many projects start with the barest headline list of requirement only to find later
the customer’s needs have not been properly understood.to avoid these problems. Proper
requirement gathering activities (proper) are very important
Discuss the importance of gathering requirements.
After gathering requirements only we can ensure requirements are specific, realistic and
measurable
Most of the projects are not in standard, which is expected by the user group because
developers assumed the requirements without gather from the relativistic users so we need to
gather it from actual users or related people
After gathered the requirements only we can identify political issues related to the project,
economic and business environment changes, user categories.
We need to have enough consultation with real users and practitioners to get the proper
requirement and get agreed with stake holders before the project starts. And more
consultations are increased the accuracy of gathered requirements.
When we have proper requirement document we can create prototype if necessary to confirm
or refine the customer’s requirement

Page | 15
Which goals you plan to achieve through gathering requirements?
To be successful at our requirements gathering and to give the project an increased likelihood
of success we have planned to achieve these goals.
 Involve the users from the start.
 Define and agree the scope of the project.
 Ensure requirements are specific, realistic and measurable.
 Gain clarity if there is any doubt.
 Create a clear, concise and thorough requirements document and share it with the user.
 Confirm our understanding of the requirements with the intended users.
For the Application:
 Define actual users of the application
We are not develop this application from begin. We don’t know who are the actual users?
And what functionalities they really want? So we can get more idea about various audience
groups through gathering requirements.
 Get good user satisfaction design interface (user-centered design)
Our MusikCube application is already exist and someone created the design interface. That is
not satisfied to all the user levels. Because that design interface not have more user friendly.
So that application is not reach all the user levels. So we plan to achieve a good user
satisfaction design interface through gathering requirement from different level users.
 Make sure modifications of the existing functionalities
We can get brief idea about what are the modifications we do in existing functionalities and
how to change that functionalities flexible for different user levels through gathering
requirement.

Page | 16
 Prepare new functionalities for the application
In the existing application some new function must want. We don’t know which function
must want by mostly use audience. So we can fix what are the new things add this
application from gathering requirements.
Identify different kinds of requirements relevant to your design project (not requirements
only types)
 Functional Requirement
 Add music file to the app
Our application mostly base on music. So accepts different type of music files
from the device files system and some other external device. At the time user
add multiple files or single files to the app
 Play selected music
When user select the music automatically play that music
 Create a music library
User can create a music directory within the app and store music files inside
the directory
 Search music file
User can search all the possible search (music name, album, artist and lyrics)
for find a music file.
 Find recently play files
There is an option called as recent add. That will help to find resent added
files from the large musical library
 Non Functional Requirement

Page | 17
 Portability
Portability is the usability of the same software in different environments. The
pre requirement for portability is the generalized abstraction between the
application logic and system interfaces. MusikCube is a desktop application
so user can’t run without install. Different type users have different
environment devices. So this application must support to various platform.
 Performance
Performance is characterized by the amount of useful work accomplished by a
computer system or computer network compared to the time and resources
used. In the Musikcube Application. High computer performance may involve
one or more of the following
 After user select the song application plays song within 2
second (short response time)
 High throughput (rate of processing to play)
 Low utilization of computing resource(s)
 High availability of the computing system or application
 Security
This is an audio player so only access music files. It doesn’t access other files
from the installed device.
 Data Requirement
 Music Album Information
 Artist / Composer
 Title
 Format

Page | 18
 Label
 Catalog number
 Release date
 Genres
 Number of tracks
 Total duration
 Music file Images
 Front Covers
 Back Covers
The whole data of this software package will be stored in a database.
Discuss how you are going to identify user characteristics.
Using the data that has been gathered, you can start building your user groups. As the name
implies, user groups are groups of users who share similar characteristics. There are not specific
users for the MusikCube. These characteristics typically fall into 3 categories:
• Personal: e.g. age range, gender and capacities
• Academic: e.g. education, certification and computer experience
• Attitudes: Attitudes towards the job and the task
The application mainly forces on entertainment purpose therefore it could be used
either for personal, academic or any other way.

Page | 19
Identify requirement-gathering methods to be used in your project.
Requirements gathering are an essential part of any project and project management.
Understanding fully what a project will deliver is critical to its success. This may sound like
common sense, but surprisingly it's an area that is often given far too little attention.
Many projects start with the barest headline list of requirements, only to find later the customers'
needs have not been properly understood.
One-way to avoid this problem is by producing a statement of requirements. This document is a
guide to the main requirements of the project.
An entertainment application like MusikCube can attract any age group therefore gathering
requirements include all types of user groups.
Some of the requirement gathering methods that can be used in the team’s project are:
 Interview: - the team members interviewed certain age groups and made personas
using the details given.
 Researching Similar Products: the team members can find similar products and get
ideas how other developers have portrayed the requirements accordingly. For
example the team is highly motivated by iTunes created by apple development team.
 Study documentation: Procedures and rules are often written down in manuals and
these are a good source of data about the steps involved in an activity and study the
applications user manual and get to know more about the application rules and
standards. Apply them when developing.
 Focus groups and workshops: These sessions can be very structured with set topics
for discussion, or can be un- structured. In this latter case, a facilitator is required
who can keep the discussion on track and can provide the necessary focus or
redirection when appropriate this could be helpful to the team to find multiple user

Page | 20
 Observations: - Observation involves spending some time with the stakeholders/
supervisor as they go about their day-to-day tasks, observing work as it hap- pens, in
its natural setting. A member of the design team shadows a stakeholder, making
notes, asking questions (but not too many), and observing what is being done in the
natural context of the activity.
Type Data type Advantages Disadvantages
Researching
similar products -
Qualitative Good for prompting
requirements
Takes a lot of time
Focus groups and
workshops
Some
quantitative but
mostly
qualitative data
Highlights areas of
consensus and
conflict. Encourages
contact between
developers and users
Collecting multiple
viewpoint
Possibility of dominant
characters

Page | 21
Perform identified requirement gathering method sessions and Develop Personas for each
target user groups.
Personas
Name: - Pari
Age: - 12
Location: - Colombo
Behavior: - 12 years old Pari loves music and dancing takes dance lessons. Owns a
computer.
Goal: - wants to enjoy her life with music and dancing
Frustrations: - cannot find music list as preferred.
Personas
Name: - Sinthujan
Age: - 19
Location: - Colombo
Behavior: - high school student self-conscious about his image and wants to seem like
he has knowledge about what is trendy in the music scene and also wants to show that
he knows what good old music sounds like.
Goal: - wants to keep track of all old songs and trendy songs
Frustrations: - if certain song he searched could not be found

Page | 22
Personas
Name: - Theebikka
Age: - 27
Location: - Colombo
Behavior: - Female executive in retail chain earns 100 thousand rupees per year loves
music
Goal: - Theebikka remembers making mixed tapes with a tape and the radio when she
was young she loves craft of it and is especially interested in discovering new music to
create and share.
Frustrations: - doesn’t like complicated interfaces or too many paragraphs on her
music interface. Likes quality playing.
Personas
Name: - Thiep
Age: - 38
Location: - Batticaloa
Behavior: - married with two kids and his kids love to listen to music all the time. He
loves spending time with his kids. He’s also a singer.
Goal: - wants to keep track of all old songs and trendy songs.

Page | 23
4.0. Use Case Diagram
A use case diagram at its simplest is a representation of a user's interaction with the system that
shows the relationship between the user and the different use cases in which the user is involved.
A use case diagram can identify the different types of users of a system and the different use
cases and will often be accompanied by other types of diagrams as well. This is a use case
diagram for Musikcube system.
Figure 1 Use case Diagram

Page | 24
5.0. Use Case Scenario
A use case represents the actions that are required to enable or abandon a goal. A use case has
multiple “paths” that can be taken by any user at any one time. A use case scenario is a single
path through the use case. Our team found some use cases from the use case diagram and
develop scenario for that use cases. There are some use cases given below. After that prepare
scenario for that use cases.
 Play song
 Import new song
 Remove song
 Search a song
 Create new song library
Use case name: Play a song
Primary Actors: Teenagers, Adult
Scope: Music player System
Brief: User select the song and play it
Precondition: Songs already import to the system, Audio driver and
speakers have been workable.
Basic flow: 1. The system display list of songs for choice.
2. The user select the song from the list
3. System display that song details
4. User press the play button
5. System play the song from the beginning
Table 5 : Use case scenario 1

Page | 25
Use case name: Import new song
Brief: User select the song from the PC or external storages
and add the song to the song library
Precondition: PC or external storage has song files.
Basic flow: 1. The System display import file option
2. The user select the add file option
3. System display the open dialog box
4. User find the music file through the dialog box
5. Select the file and add to the system
6. System display that song details inside the list.
Table 6: Use case scenario 2
Use case name: Remove song
Brief: User select the music file and remove that file from the
system
Precondition: System already has some music files.
Basic flow: 1. The System display list of song files
2. The user select the song
3. System display the selected song details
4. The user press the remove button
5. Selected song remove from the system

Page | 26
6. System display new list of songs.
Use case name: Search a song
Brief: User search a particular songs or song by using key
words(name or album or singer name)
Precondition: System already has some music files.
Basic flow: 1. The System display the search bar
2. The System display list of songs
3. The user put key words inside the search box
4. The user press the search button
5. The system find songs suitable as input keywords
6. System display list of songs or song.
Use case name: Create new song library
Brief: User create a directory with favor name and add music
files to that directory
Precondition: PC or external storage has song files.
Basic flow: 1. The System display create new playlist option
2. The user press add directory option
3. The system create a directory.

Page | 27
4. The system display rename option for that directory
5. The user put name for that directory.
6. The user select song and add to that directory
7. The system view all the song content of the directory
6.0. Volere Shell
Methods and approaches for analysis, interpretation, and presentation of data are applicable
during the requirements activity to structure and record description of requirement. Using a
format such as Volere shell highlights the kind of information to look for and is a good first step
in data analysis for requirements. Many of the entries are concerned with traceability. There are
some volere shell given below.
Requirement #: 1 Requirement Type: 09 Event/Use Case #’s:2
Description: Add new song file to the player
Rationale: If you want to listen new song you must add that song to the player otherwise you
can’t listen.
Originator: Teenagers, Adult
Fit Criterion: For each music file add to the system that file must be check already add or not in
the music library
Customer Satisfaction: 5 Customer Dissatisfaction: 5
Priority: High
Supporting Materials: Music player system
History: August 12, 2015 Volere
Copyright © Atlantic Systems Guild
Figure 2: Volere 1

Page | 28
Description: Play a song
Rationale: If you want to listen song you must select the song and play
Fit Criterion: Every time before the music file play check that file inside or not in the music
library.
Priority: High
Description: Remove song
Rationale: Some time user would like to remove a song or songs from the music library. In this
situation they want remove option
Fit Criterion: before remove the music file check that music file playing or not
Priority: High
Figure 3: Volere 2
Figure 4 : Volere 3

Page | 29
Description: Search song from the library
Rationale: If the music library has more and more song user can’t scroll and find that song
quickly. So system must want a search function
Fit Criterion: every search check music file is inside the system or not inside the system library
Priority: High
Description: Create music library for our favor music.
Rationale: There are many types of songs inside the music library. Some users want to set
songs suitable as their favor. So create new music library is important for their need.
Fit Criterion: when every music library create check that name already create or not in the
system.
Priority: medium
Figure 5 : Volere 4
Figure 6 : Volere 5

Page | 30
7.0. User Groups
The following tables illustrate the user characteristic of the main two group:
Secondary User Group : Adults
Profile : Undergraduates and Working people, above 19 years old
Educational
Background :
Higher Education (at least school leavers)
Orientation to
Listening music :
Adults use music application occasionally
and when they have free time for relaxation also familiar with these
kind of application they may frustrated with some other
non-user friendly music applications so this group should be
motivated
Motivation : Adults are need more user friendly music application to fill up their
free time by listening some good music
Main User Group : Teenagers
Profile : Study beginners, under 20 years old
Educational
Background :
Coming from school and generally computer literate
(at least above 13 years old )
Orientation to
Listening music :
Teenagers enjoy their life in this period of time so one way of
enjoying is listening music they may still have some problem to
choose right application so this group should be motivated
Motivation : Study beginners are quick learners and easy to motivated to new
things so need to motivate to good quality thing
Conception
Of Listening :
Listen music by familiar and user friendly application
Assessment : Teenagers are familiar with latest technology in entertainment field
and also quick learners
Table 10 : User group 1

Page | 31
Conception
Of Listening :
Listen music by familiar and user friendly application
Assessment : Adults not ready to spent more time for customize application or
learn new application function like Teenagers so they like to use one
click application
Table 11 : User group 2
8.0. Transcript
Preliminary Interview Questions
1) How often do you listen to music?
2) What are the music applications you most likely use?
3) Can you understand the side menu categories like Library, Dynamic Playlist and Playlist?
4) What you thing about these play bar buttons, icons and appearance?
Specific Instruction
1) Play a Song which is already exist in the playlist
2) Import a new song to the music library
3) Delete a song which is already exist in the playlist
4) Create a new Playlist
5) Search a song or playlist etc.

Page | 32
User #1
User Description
The user is a female user of Sri Lankan origin aged about 15 years. She is school student
She has hand on experience in using a computer and also has some experience in current
technology stuffs (latest mobile, tablet etc.)
She has minimal experience in these kind music applications
1. Me: How often do you listen to music?
2. User : all time specially in my leisure time
3. Me: What are the music applications you likely most?
4. User: VLC and Windows Media player
5. Me: Can you understand the side menu categories like Library, Dynamic Playlist, and
Playlist etc.?
6. User: Actually I don’t’ know about ‘Net Radio’ and ‘Dynamic Playlist’ but I know about
other Categories
7. Me: Can you try playing a song?
8. User: where is the play button? I can’t find it buttons are too small difficult to find it
(Select the song  try to find the play button  press play button  done) (0.50)
9. Me: What you thing about these play bar buttons, icons and appearance?
10. User : There are common standard icons I don’t know about some buttons such as
‘Shuffle’ and ‘Equalizer’
11. Me: Can you try importing a song to the playlist?
12. User : ( User doesn’t know how to do import a song to playlist but under the interviewer
instruction )
(Select File menu  select Music Library  Add Files  select songs from list
 open  done) (2.28)
13. Me: Can you try deleting a song?
14. User : ( User doesn’t know how to do import a song to playlist but under the interviewer
instruction she managed it )

Page | 33
(Select the song  right click the mouse  select delete option form menu 
select delete from library option  done) (3.20)
15. Me: Can you try creating a playlist?
16. User : (enter the playlist name in the create bar  press enter  done) (4.05)
17. Me: Can you try searching a song?
18. User: When I am typing it doesn’t give any suggestions so difficult to understand
(User spend more time to find search bar  type the key word in search bar 
done) (4.18)
User’s Suggestion
Buttons are too small need to be bigger in the application you can put some images or cover
photo to song to identification need to change the interface appearance color, theme or
something I need more attractive
User #2
User Description
The user is a female user of Sri Lankan origin aged about 17 years. She is a school student.
She has good experience in using a computer and also has experience in current technology
stuffs specially know about latest music applications and he use them primarily.
2. User : When I am free I listen to the song
4. User: usually I am using ITunes
Playlist etc.?
6. User: I know about some categories but I don’t what stands for ‘Dynamic playlist’
8. User : (User search play button for few seconds)
(Select the song  try to find the play button  press play button  done) (0.42)

Page | 34
10. User: They are difficult to find and they are in the corner of the interface and I don’t
know about some keys those meanings.
12. User : (User spend more time for this function)
 open  done) (2.30)
14. User : (User doesn’t know how to delete a song but under the interviewer instruction she
managed it)
16. User : There are two types of playlist
(Enter the playlist name in the create bar  press enter  done) (4.10)
18. User: There is no suggestion given by this application
(User quickly found the search bar  type the key word in search bar  done)
(4.25)
User’s Suggestion
This Applications is difficult to use not a user friendly it has so much blank space like white
space so not attractive. Buttons are too small and they are located in the corner they should be in
other location which is more visible songs should have some images like album cover and need
more attractive and colorful.

Page | 35
User #3
User Description
The user is a male user of Sri Lankan origin aged about 19 years. He is an IT student
studying in a private University
He has very good experience in using a computer and also has experience in current
technology stuffs specially know about latest music applications and he use them primarily.
He is an IT related person
2. User : All the time and whenever I get free time
4. User: usually ITunes or other default players
Playlist etc.?
6. User: I know about all except one which is ‘Net Radio’
8. User : (select the song  double click on it using mouse  done ) (0.48)
10. User : They are in common standard and they are in lower corner of the application so
hard to find better to have them in top of the application home page
12. User : (select File menu  select Music Library  Add Files  select songs from list
 open  done) (2.05)
14. User : (User don’t’ know how to delete a song but under the interviewer instruction he
managed it)

Page | 36
18. User: It doesn’t give any suggestions when I am searching something it must show some
suggestion otherwise we can’t understand whether it’s working or not
(User spent more time find search bar  type the key word in search bar  done)
(3.22)
User’s Suggestion
It has to rearrange like menu and button and icons there locations. The play bar option should be
in the top of the application in this application better to have album cover images individually
User #4
User Description
The user is a female user of Sri Lankan origin aged about 23 years. She is an IT student
studying in a private University
She has good experience in using a computer and also has experience in current technology
2. User : Always listen to music
4. User: Windows media player and ITunes etc.
Playlist etc.?
6. User: These are common categories but I don’t know what is meant by ‘Dynamic
Playlist’
8. User : (Select the song  try to find the play button  press play button  done) (1.18)
10. User : It’s difficult to find play button the letters and icons are too small

Page | 37
12. User : ( User easily deleted the song)
 open  done) (4.30)
User’s Suggestion
Actually this seems boring and first thing is the interface has huge white space white is normal
but need more colorful and attractive it should have some images and cover photos. Icons,
Buttons and letters should be bigger volume bar should be in the top of the corner like more
viewable.
User #5
User Description
The user is a male user of Sri Lankan origin aged about 26 years. He is unmarried. He is a
medical student and doing a part time job
He has good experience in using a computer and also has experience in current technology
2. User : whenever I get free time I listen to music
4. User: ITunes etc.
Playlist etc.?
6. User: It’s in normal way
8. User : (Select the song  try to find the play button  press play button  done) (1.18)

Page | 38
10. User : This is obviously play and stop button others are forward, backward and shuffle
all are in common standard but all towards the corner in other apps those are in
top
 open  done) (2.30)
14. User : There is no delete button first it’s ok this is common think
18. User: It’s not helpful in other apps when we typing the letters it will give suggestions we
don’t need to type entire key word
(User spent more time find search bar  type the key word in search bar  done)
(4.18)
User’s Suggestion
When we have music application once you playing a song there is supposed to be image or
something like album cover which is related to song it is supposed to be have some colors and
more attractive and it has huge blank space it’s not attractive for current generation icons and
letters are too small. Need more changes.

Page | 39
User #6
User Description
The user is a male user of Sri Lankan origin aged about 30 years. He is unmarried. He is an
Engineer
Working in a leading company
He has good experience in using a computer and also has experience in current technology
stuffs specially know about latest music applications and he use them primarily. and also
have good experience in IT filed
2. User : Almost whole day
4. User: ITunes etc.
Playlist etc.?
6. User: I can understand There are common
8. User : (Select the song  double click on right mouse button  done) (0.38)
10. User : They should be bigger and logically they are normal button icons are normal
common standard
12. User : (Select the song  right click the mouse  select delete option form menu 
14. User : that’s going through the normal logical sequence
(User spend more time to import a song to the Library)
 open  done) (2.05)

Page | 40
User’s Suggestion
Home page is pretty blank huge white space it should have some really nice colors, background
and images in current people actually prefer attractive and user friendly application because for
the beginners it’s difficult to work it out providing some functionality to user to customize the
application should have some updates continuously so lot of changes to be made
9.0. Flow Diagram
Figure 7 : Flow Diagram

Page | 41
10.0. Artifact Diagram
Figure 8 : Artifact Diagram 1
Figure 9 : Artifact Diagram 2

Page | 42
11.0. Proto Type
A prototype is one manifestation of a design that allows stake holders to interact with it and to
explore its suitability; it is limited in that a prototype will usually emphasize one set of product
characteristics and de-emphasize others.
When you hear the term prototype, you may imagine some think like a scale model of a building
or a bridge, or maybe a piece of software that crashes every few minutes. But a prototype can
also be a paper-based outline of a screen or set of screen, an electronic picture, a video
simulation of a task, or a three dimensional paper and cardboard mockup of a whole work
station. This assignment use paper-based set of screens.
Why Prototype important?
Prototype are a useful aid when discussing ideas with stakeholders; they are communication
device among team members, and are an effective way for designers to explore design ideas.
There are two main prototype. Namely
 Low –Fidelity Prototype
 High –Fidelity Prototype
In this assignment use low –fidelity prototype
Low –Fidelity Prototype
A low –fidelity prototype is one that does not look very much like the final product. For
example, it use materials that are very different from the intended final version, such as paper
and cardboard rather than electronic screen and metal.
Low –fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce.
This also means that they are simple, cheap, and quick to modify so they support the exploration
of alternative design and ideas. This is particularly important in early stages of development,
during conceptual design for example, because prototype that are used for exploring ideas should
be flexible and encourage rather than discourage exploration and modification. Low –fidelity

Page | 43
prototypes are never intended to be kept and integrated into the final product. They are for
exploration only. There are some reasons using low –fidelity prototype for this assignment
Advantages of law –fidelity prototype
 Lower development cost.
 Evaluate multiple design concept.
 Useful communication device.
 Address screen layout issues.
 Useful for identifying market requirements.
 Proof-of-concept.
Found some break downs from control flow diagram and become three solution prototypes for
each break downs. Full details of the solution prototypes against break downs given below.
Break Down Prototype 1 Prototype 2 Prototype3
Not easy to find play
menu bar
Change the position
(middle) of the play
menu inside the
player and Change
shape of the menu
buttons such as
Play button: Circle
Next song: Circle
Previous song: Circle
Change paly menu
color and reduce play
loader size
Play and stop button
works as a one
button. Add tool tips
to the buttons
Take long time to
find add file option
Create button option
for add new songs
outside the file menu
Add plus icon to the
button
Give tool tips(Add
new songs) for this
button
Don’t have a fully
view of the song
details
Change vertical
details view, Add
album type view and
Add playlist view
Add default label
image for a song
Add new label image
for a song

Page | 44
Cannot understand
where is the place of
remove option
Create a remove
button in the
horizontal end of
each song details
Add trash bin icon to
the button
Give tool tips
(Remove this) for this
button
Not easy to find
search box
Change the
position(top of the
player)
Add option dropdown
to the search
Change the search
icon and give search
option inside the
option menu
Don’t understand side
menu view
Change the view of
the menu
Add default icon easy
to find the menu
Add description to
each every menu
Not easy to create
new play list
Create a new
interface to create the
play list
Add a button to
create and small
description about the
playlist
Add a popup menu to
add a name to the
playlist and save it.
volume equalizer is
not work
Change the position
menu of the player
Add a menu to the
different equalizer.
Add equalizer and a
button to download
from the internet
Not easy to handle
volume controller
Change the position
menu of the player
Add volume icon to
the button
Change the volume
controller creative
way.
Table 12 : Breakdowns

Page | 45
11.1 Paper based prototypes
Figure 10 : Prototype 1

Page | 46

Page | 47

Page | 48
Figure 16 : Prototype 7.1
Figure 17 : Prototype 7.2

Page | 49

Page | 50

Page | 51

Page | 52

Page | 53

Page | 54

Page | 55

Page | 56

Page | 57

Page | 58

Page | 59
12.0. Meeting Minutes
12.1. Meeting 1
Meeting Date: 14/07/2015 Meeting time: 1.30pm - 2.30 pm
Project Manager: Jeyaprashanth.S Meeting Location:
4th floor lab (403)
in sliit
Minutes taken by: Jeyaprashanth.S Next meeting date: 20/07/2015
Approval of minutes:
 Motion: Approve minutes from 7 July 2015 meeting
 Vote: Jayaprasanth
 Resolved: Minutes from the meeting on 7 July 2015 approved without modification
Members Role
Jeyaprashanth.S Project Manager
Aarooran.K Graphic Designer
Sujeevan.S Psychologist
Alston. M.T.A Document controller
This is our third meeting. Last meeting minutes submitted by Sujeeven. I read aloud. All the
members accepted that minutes. We got some feedback for our last submission (practical 2) from
our client. We analyzed our modifications for that submission and assign members (Sujeevan
and Alston) to do that modifications. We identified Design Principles from existing Musikcube
Application and we suggested using some design principals to the existing design. Took some
notes for prepare our next submission from our members. At last we decided our roles for our
next meeting.
Meeting adjourned at 2:30 p.m. by Project Manager Jeyaprashanth.S
Meeting
Attendance:
Aarooran.K, Jeyaprashanth.S, Sujeevan.S, Alston. M.T.A
Absents: none

Page | 60
12.2. Meeting 2
Project Manager: Aarooran.K Meeting Location:
7th floor lab
Minutes taken by: Alston. M.T.A Next meeting date: 20/07/2015
 Vote: Alston. M.T.A
Members Role
Aarooran.K Project Manager
Jeyaprashanth.S Graphic Designer
Alston. M.T.A Psychologist
Sujeevan.S Document controller
On the fourth meeting the group met with the supervisor in order to show the changes in the
previous practical and the feedback was received. Then the lecturer gave the practical four. And
the group discussed the objectives based on the user involvement, necessity of users, types of
users and the degree of involvement. Also the team agreed on following the iterative life cycle.
Meeting adjourned at 2:30 p.m. by Project Manager Aarooran.k
Meeting
Attendance:
Absents: None

Page | 61
12.3. Meeting 3
Project Manager: Aarooran.K Meeting Location:
4th floor lab (403)
in sliit
Minutes taken by: Sujeevan.S Next meeting date: 4/08/2015
 Vote: Alston. M.T.A
Members Role
Alston. M.T.A Project Manager
Sujeevan.S Graphic Designer
Aarooran.K Psychologist
Jeyaprashanth.S Document controller
Individual workload
Members Question
Alston. M.T.A 6, 7
Sujeevan.S 5
Aarooran.K 3, 4
Jeyaprashanth.S 1 , 2
Meeting
Attendance:
Absents: none

Page | 62
13.0. Individual Work Load
#No Workload Done By Revised By
01 Transcript for all users Jeyaprashanth Aarooran
02 User Description for all users Jeyaprashanth Aarooran
03 Questions and Instruction Jeyaprashanth Amritha
04 Characteristic of User Groups Jeyaprashanth Aarooran
05 User Video (No of Videos 3) Sujeevan Jeyaprashanth
06 Prototype Design
(for 4 Breakdowns)
Sujeevan Aarooran
07 Use case Diagrams Aarooran Jeyaprashanth
08 Use case Scenarios Aarooran Amritha
09 Flow Diagram Aarooran Amritha
10 Prototype Design
(for 5 Breakdowns)
Aarooran Sujeevan
11 Volere Shell Requirements Aarooran Jeyaprashanth
12 User Video (No of Videos 3) Amritha Jeyaprashanth
13 Artifact Diagram Amritha Aarooran
14 Introduction Amritha Sujeevan
15 Methodology Sujeevan Amritha
16 Conclusion Sujeevan Amritha
15 Document Formatting Sujeevan All Members
Table 13: Individual workload

Page | 63
14.0. Conclusion
This application was picked for this assignment as it has many improvements areas to make it
much better in the point of view of users in the future. The user groups were categorized as
adults and teenagers according to their experience level. After listing the user groups requirement
were gathered and that is represented by use case and volere shell.Contexual Inquiry was carried
out and the model diagrams were identify the break downs and solutions are given as paper
based prototype. Reports were generated explaining the purpose of the assignment, and how the
software can be improved for future needs.

Page | 64
15.0. Reference
1. HCI Lecture Slides
2. INTERACTION DESIGN: beyond human-computer interaction, 3rd Edition
3. Volere : “http://www.volere.co.uk/template.htm”

HCI-Final-Document

More Related Content

What's hot (20)

Similar to HCI-Final-Document (20)

HCI-Final-Document