4SELF

NADHRAH ASMA BINTI MOHD NAJIB UNIVERSITY TECHNOLOGY MALAYSIAA13CS0084SECTION 04

KATRIGESAN CHANDRAN UNIVERSITY TECHNOLOGY MALAYSIAA13CS0040SECTION 04

ABSTRACT

In this paper, we will describe the process ofdesigning a mobile application named 4SELF.This is an overview of how we made design, implemented those design in various stages of prototyping, and evaluated the usability of the application at each step in the process.

Author Keywords

HCI; Human-Computer interaction; 4SELF; mobile applications

ACM Classification KeywordsC.5.3:iPhone

INTRODUCTION4SELF application was designedto make the task of finding lost items or track the items becomes the easier one. Most people tend to misplace or forgotten their ownitems, so it ends up taking up a large portion of their time, especially when done inefficiently. We wanted to tackle the most important

NOOR AIESAH BINTI MOHAMADUNIVERSITY TECHNOLOGY MALAYSIAA13CS0089SECTION 04

SITI AISHAH BINTI SAMUDUNIVERSITY TECHNOLOGY MALAYSIAA13CS0149SECTION 04

challenges that arise when this kind of situation happend, such as finding items in asound mode or map mode. This process was concerned with the user interface design of the mobile application as opposed to the back-end programming aspect of application.

PROBLEM

At the beginning of the project, we had done some observation on what kind of problem people usually faced.During the observation,we discovered that people tend to misplace or forget their things like keys, handbag and much more.So, we made discussion and come out with an idea of creating a mobile application that detect the lost item either by sound or maps.We named the apps 4SELF.

USER

Our user is anyone who faced the problem we mentioned above.Specifically, the target user would be teenagers, middle aged and old people. Our personas ranged from age 20 to age 50, but our most accessible audience was college students, since we have plenty of those on our

University Technology Malaysia campus that available for user testing at any time.

TASKIn the apps, user need to:

a) Sign up for first time user or log in for already registered user.

b) Setting up security pass of the appsc) Adding category d) Adding itemse) Edit itemsf) Search item by sound or mapsg) Log out

DESIGN

The interface of the apps have a few parts that has been modified according to the feedback of user testing which have been done before.After the user testing is done, we received many comments neither good or bad.From the test, most of our user are satisfied with the interface of our apps but there are still a few things that need improvement in the design.Our advisor, Madam Nor Anita Fairos gives us some ideas on how the design should be in order to increase the userbility of our apps.Below, we have provide the design of our apps before and after user testing.We use Justinmind as tools in developing the apps.

To start out the design, we have to sketch it out first to ensure the flow of the design is correct and can reduce errors. This is what we called as paper prototyping. Paper prototyping is very important because this way we can know what our application’s flows are.

Our logo application colours are blue, white and pink. Thus, the application theme colours are based on our logo.

Before and after user testing:

a) Sign up for first time user or log in for already registered user.

Before After

Figure 1

Log in

Before: For user that already have account in this apps, they just need to log in via social media either facebook, google+ or tweeter.By login into their social media account,they are automatically connect to the apps.

After : In our first design, we include the log in with social networks such as Facebook and Twitter. After some discussion, we decided to remove them because it will make more difficulties in terms of security because nowadays crackers can easily break into the user’s social network accounts..So we change the way to login into manual where user need to fill up some form and then the application will remembered the username.When the user want to use this application again, they just need to enter the passcode and the application is ready to operate.

b) Setting up security pass of the apps

Before After

Figure 2

Before : After the user has successfully log in to the apps,next, they need to set the passcode to ensure that they are the owner of the account.The earlier design was a bit dull because of the colour choosen.

After : We change a little bit the interface to make it more attractive and easy to use.We change the colour of numbering button to white so that it can be clearly see by user.

Sign up

Before : For first time user, they need to register first before using this application.Refer to Figure 1 in which the sign up button is there for user to start registering.When the sign up button is choose, Figure 1.3 below will appear.

before Figure 3 after

User is needed to fill the spaces as shown above ,the username, password and email.After

fill in the requirements, the user need to set up the passcode as shown in Figure 3.

The design was just black and white so it lessen the attractiveness in the page.

After : After the user testing, we just change the background of the page to make it attractive but still maintain the requirement that needed for sign up.

c) Adding category

Before After

Figure 4

Before : The home page is shown after the passcode is done.There are several category that have been provided to user.If the user want to add their own category they just need to press the green icon as shown in the Figure 4 .Feedback that we get from user is that they doesn’t understand the icon we provided.They do not know what is the function of the green icon.

After : So we made the interface more simpler by showimg the icon as in the Figure 4 so that the user more understand to use.Words” Add Category” is put below the icon as guidance to user about the meaning of the icon.If user enter the icon, they will see the interface as in Figure 5 .

Before Figure 5 After

Before : When the green icon is choose, the user need to fill the requirement as shown in the Figure 5,the category’s name and the icon of the category.The icon is listed and the user just need to choose suitable icon according to the items.

After : We changed the interface to more simpler design that is the icon of the category and the name of the category.The interaction between user and the application becomes more attractive because the interface is easy to use and interesting.

Basically,when the icon “Add Icon” in the circle button is enter, Figure 6 will appear listing all category that might be in this application.

Figure 6

Then the interface when the category is added becomes as in Figure 7

Figure 7

d) Adding items

Before After

Figure 8

Before : After the category has been added, next, the user need to insert the lost item in the category. Figure 8 shows some of the item that have been added.User need to enter the green button if they want to add items.The user also have the difficulties to recognized the add button which is the green button.Other problem is the user confused about the edit and search button.The search button initially functioned to search for the lost item but some of the user misunderstand it as search the items listed in the application.Meanwhile most of the user does not understand the edit button.They thought that the edit button was the button to add new item but the fact that it is not for adding new item,it just for edit the selected item such as changed the icon for the item.

After : We improved the design by just put the “Add Icon” first.When the icon is selected,Figure 9 is shown.

Before After

Figure 9

Figure 9 : is the interface for user to scan the accessories that comes with the apps.The user need to scan the accessories first so that the apps will recognized it and can find the lost item through it.

We changed the QR code icon so that it is more readable and user can understand the meaning of the icon.

When the accessories have been scan,interface is as shown in Figure 10

Before After

Figure 10

Before : We provided the button for changing the icon and spaces for name of the item.

After : The design does not change.This part can be use well by the user duringt he test. Once the addition of the item is done, theinterface is as shown in Figure 11.

Figure 11

e) Edit items

Before After

Figure 12

Before : The interface that can be edit is the icon picture, name of the item and category of the item.User can edit it or delete it from the list.

After : The design does not change too much.We just delete the category space because the item was already in their own category.

f) Search item by sound or maps

Sound

Before After

Figure 13

Before : when user used sound in search the item, the speaker icon will indicate the search is still on going.We have comment that it is not really suitable because the user may have difficulties in finding the direction of the lost item.

After : Our advisor sugggest to us instead of the speaker we can use the compass to show the direction of the item. Compass was a good idea since it can direct user to the specific area where the item located, thus searching can be done faster.

Map

Before After

Figure 14

Before : We use map in finding the lost item.The map will show the direction to the lost item and show the distance between user and the lost item.

After : The design does not change much.We still maintain the design as before because during the test, the user is satisfied with it.

g) Log out

Before After

Figure 15

Before ; We put the log out button at the bottom of the page.User sometimes does not realize the existence of the log out button.

After : We put the log out button at some other place that is profile.With this new position, the interface is more organized and user know where to log out because the instruction is more clear.

Additional features

1) Feedback

Figure 16

We provide feedback page in case user want to give comment about these application.With this features, we can improve any lackness of the application so that it can be more useful in the future.

2) About us

Figure 17

This features contain the information about this application.What version is this application and some other information.

3) Search

Figure 18

This search button functioned to search the item in application.For example,when user lost the car key they can go to the search button which is the magnifier icon and enter the key word “car key”.Instantly the list of car key will appear and user just need to choose the correct key that is lost.

Implementation

We use a software prototyping tool called JustinmindPrototyper.JustinmindPrototyper can be used to create prototypes and simulations of software without any coding, thus allowing non-programmers to be involved in the project.Justinmind allow to built the prototype faster and better with default built-in-widget. These widget have been specifically designed to fit the iOS or android apps.

Figure 19: Workspace on JustinmindPrototyper

After pulling the images, Justinmind let the static design into clickable interactive wireframes by setting up hotspots and linking screens.

There is a lot of collection of fonts available in JustinmindPrototyper. The font type drop-down allows to choose from the hundreds of fonts options available in Google’s font directory.For the type of font we used, we try to search on the website what is the suitable font to use on apps. Therefore we choose Ubuntu font and it also available on the Justinmind.

Smart guides such as rulers and grid that help to place and align every element drag into canvas. So the content of the design will be consistent throughout the entire design with help from grid and ruler. This feature really help to know the exactly size of the canvas and to make sure the shape or image that drag to the screen in a correct place. So the widget that drag to screen will be the same place as other screen.

Justinmind also allow to customize and control widget borders,one by one or all at once. The adjusted image on Justinmind also can be done easily because all images inserted on wireframes can be modified to fit the dimension and style of the design.The other thing feature in Justinmind that we really like when we click at the objects in a screen so it’s automatically will show the properties of the objects. We can change the size the objects using the scale. It really help to make the other objects in a same size too. It also can change the border easily. Justinmind’s editing features allow to crop images,rotate or flip images across axes and resize them.

Figure 20:The grid and rule that really help in prototyping

To change the image also easy because we have to double click then it will open on our folder on the computer. The duplicate task also help because it can duplicate the screen because lot of our screen is the same thing so we do not need to create the screen again. It is easy to choose the other screen because it has a list of screen on the right side of the software.

The simulation and testing can be done using the mobile device and also using the web. So that easily can simulate and doing the user testing. Major drawback of JustinmindPrototyper is when stimulate the projects, it is difficult to click on the action given. Our testing user sometimes look frustrated because they have to click twice or more. So the result of thatproblem make the time interval of certain task become long and it is effect on our evaluation reports.

The design make easy because every single things on the content of Justinmind can be link to other screen. Images, shape , dialog box, can be easily connected. We try to make the icon can be functionality. The prototyper that we used only Pro in 30 days only and after that it is free edition. So some of the features are not available in free edition. So that is the restraint

that we facing. We try to make the screen have some time interval so that after the time given it will proceed to the next screen but due to free edition we cannot to do that. We don’t want to click to proceed to the next screen.

EVALUATION

As we finished the computer prototyping, we conduct user testing and evaluations with our own classmates because of the time limitation. The user testers are students who take Software Engineering in UniversitiTeknologi Malaysia.

Before they start using our prototype, we provide some guidelines in a piece of paper to ensure the user click the right button to complete the task. We let them go through the guideline and working it out on their own without giving any instructions. Once they finished, we gave them questionnaires and interview them on what are their though of the design, whether it is good or vice versa. These feedbacks are very important to improve 4SELF to be a user-friendly application.

USERS

To test out the prototype, we take six people as our user testers. Our user testers are second year students who take Software Engineering in UniversitiTeknologi Malaysia. They are all 20 years old.

Since our target users are teenagers, adult and elderly, we only take adult users for survey because of the time limitation. A university student may really need to use this application because most of them frequently lost their items. Especially during presentation week, the percentage that they tend to lose their pendrive is very high. Another situation is before going to class, they have to search all over the room just to find the room key. The searching of the lost item took long time and they might be late for class. Thus, this application is much

recommended for university students. Therefore, we design the prototype based on the suitable of users form different ages.

EARLY STAGE TESTING

We wanted to show some result on paper prototyping which we did earlier before conduct user testing.

The paper prototype was a brilliant way to identify issues that our applications facing with.As part of the designer team, we did not know whether our prototype was acceptable by outsiders. At this stage, we have to take full notes and consider on what other users preferred to keep upgrade our design.

Computer prototyping came with Heuristic Evaluation from our peers. These evaluations lead us to develop application with new fresh ideas. We decide to change the theme colour because the present was too simple and boring. We add some font under the icon to make user more understandable on what the function are. And there are so many features for you to see.

USER TESTING TASKS

We started every user off with a brief statement on what our application about and how this application can benefit in our daily life. All user testers are not forced to do these tasks and they even participate voluntarily. Once they agree to be our user testing, we set a computer in front them and asked them to do these four tasks :

1. Sign Up

2. Add Category

3. Add Item

4. Search Item by Maps

We already write the order of the tasks on a piece of paper. As team members, we let them explore on their own without giving any hints.

By this way, we could see how long they take time to complete each task and ask them what to improve to make the task simpler.

As they completed all thefour tasks, we give a questionnaire for them to fill in and a packet of biscuits as gift to thank them for spending their time for us. After they finish fill in the questionnaire, we thanks them once again and take our leave.

FIXING

With all the comments from the questionnaires obtained, we conclude that there is nothing to be changed on the prototype and the most of the comments are about the less instruction given to user.

SURVEYING

The survey is based on questionnaires that were written by six user testers with different backgrounds. To make more accurate result, we need to do some calculations on measuring tools. Measuring tools have two type which are performance measures and subjective measures. The difference between these two measurement is that the performance measurement can determine how usable our application is but subjective measurement is to determine what the user feels when using our application.

Below is the graph for performance measures for each task.

1 2 3 4 5 60

20406080

100120140

Task 1

Task 2

Task 3

Task 4

User

Based on the graph above, there are some conclusion that can be made. First, the task that seems to be the easiest is Task 1 : Sign Up.The time taken for user 1 and user 2 were surprisingly faster than the actual designer of this application. Next, Task 2 : Add Category took user a longer time to complete this task. After asked the users, we determine that the user may be thinking those button was to add item. They did not know there would be a category before adding the item. For Task 3, the users seem to be faster on working this tasks because it is easy and understanable. The task that difficult for user is Task 4 : Search by Maps. The users seems to be confused with the provided guidelines which have to click 'Search' because there are two same search button but both have different functionality.

By referring to user performance score, users seem to take more time at part where they are not usual with. For Task 1, users commonly sign up in other application, that is why it is easy for them to sign up. For Task 4 , users find it difficult because users are not approachable with this kind of task. Plus, these kind of application was not popular in Malaysia.

Here is the graph on subjective measures.

Based from the measurements result above, the result was really unexpected. We never expect the confusing experience would be too high because we expect the mean would be below 3. Plus the attractive experience was above our expectation which was 4.00.

By referring to mean and standard deviation, this concludes that users find this application very attractive and helpful for features generation. Moreover, the application are not challenging and annoying because it was easy to use.

REFLECTION

Through our entire project, we ran into various issues. Upon reflection, it became evident that some of these issues could have been foreseen. While others were as a result of limitations of our prototyping tools. These are the following issues we ran into, and what we would do

differently in future projects in order to make the design process easier and more successful.

ISSUES

Our first problem we were tasked with was deciding upon a prototyping tool to utilize to best represent our application. We tested many and they had various limitations, mainly we couldn’t find a freeware to do our prototyping. There are couple of expensive software to do better high level prototyping, we couldn’t effort to buy one of the software to better prototyping,

than we decide to use trial version of Just in mind, where this software gave only 30 days of trial days, this indirectly limit our time to 30 days. So we have to move faster in order to complete the high level prototyping. Since we are very new to this software we took time to learn and master it. We face a lot of problems while doing prototyping. We encountered problem when inserting image and to create link next process. We study by trial and error method, we tried dozens of ways and finally got it right, we also browse internet to learn more about this software. We also use Adobe Photoshop to design over images, logos, and buttons. Design using adobe Photoshop was much easier than using any other software to design logos and buttons, e.g. like adobe illustrator. Even though adobe Photoshop easier to use but there was problem in import images and logos to Just in mind, we able to fix it by changing the format of images and logos and made it compatible with Just in mind. The next issues we had were related to font and colour scheme. The fonts were deemed to be too small. And illegible, and the colour scheme we used utilized green and red. This was an issue because people who are colour-blind would not be able to differentiate the colours. Finally, we have

only have design for IOS user, we never design for android or for a windows OS user.

WHAT WE WOULD DO DIFFERENTLY

For our next revolutionary prototype, we would utilize a more common, or even paid prototyping tool. 30 Days trial really limit our time to use the software efficiently. It could also be a prototyping tool that has more options in creating other interfaces such as windows, which wasn't really an option in this prototyping tool. Android was in option but this not easy as

design to IOS. There are a lot of features are missing. We may use better software to create buttons, Photoshop only help to create an image that looks like a button only, but actually it’s an image. Where there will not have an effect after a user click it.

CONCLUSION

The design process was incredibly informative and the experience was a excellent one. We learned a lot, not only technically related, but also in regards to time management and teamwork. We learned about Usability and how important it is in the design process, as well as imagining ourselves in the place of the users. Through our project we found that what we necessarily thought was important and needed in an application wasn't exactly what the user wanted and needed. We have tried with many type of users, this gave new ideas, to upgrade and able to fix mistakes. This showed us how important prototyping is because a company that dives into a project without actually taking the time to make a prototype may end up with catastrophic sales if there is a certain feature that either is inconvenient to use, doesn't do what it is intended to, or isn't included at all.

ACKNOWLEDGEMENTS

All in all, it was a pleasure to be in this class, we would like to thank our lecturer Madam Noranita Fairos for guiding and giving us ideas to complete our project. We learned a great deal of information regarding HCI. It is extremely valuable because many of us will be applying these concepts to our future lives and our technical fields.

Noor Aiesah

She has contribute a lot to our team, she lead designer for out prototyping project she have come out with limitless ideas.

Kartigesan

He built low fidelity of our paper prototype and a little bit report.

SitiAishah&NadhrahAsma

They very supportive members of our team, they have handle all the documentation of this project

Nadhrah Asma design the 4SELF accessories,designing website and also generate idea for high fidelity prototype.