Usability & Mobile Application 1 - Lecture notes and Exercises
Usability & Mobile Application 1 - Lecture notes and Exercises
29 August, 2018 - 17 October, 2018 (Week 1 - Week 8)
Jesslyn Fabryando (0332213)
Usability & Mobile Application
Lecture 1: Introduction to Usability & Mobile Application
29 August, 2018 (Week 1)
On the first week of the class, our lecturer, Mr. Shamsul, introduced us about usability & Mobile Application is all about. He briefly explained about the module and what they are all about. We were also given an activity to discuss to get to know more about usability principles and interface attributes.
According to Nielsen there are 5 usability attributes:
When designing an app we need to think and consider about:
When conducting a survey about apps we need to include:
On the first week of the class, our lecturer, Mr. Shamsul, introduced us about usability & Mobile Application is all about. He briefly explained about the module and what they are all about. We were also given an activity to discuss to get to know more about usability principles and interface attributes.
According to Nielsen there are 5 usability attributes:
- Learnability: User can easily learn without complicating ourselves to learn so hard to understand it.
- Efficiency: User has learned the system, and a high level of productivity is possible. User gain something from using the apps. (E.g. Adobe Illustrator software, if you know the software you can make an incredible work from it.)
- Memorability: Does not require a lot of things to learn, its in your head, immediately recognize and able to use the system such as IOS system.(IOS, user interface, can interact with the interface such as the Samsung tv using gesture motion). Users need to be familiar with the icons even though the layout of the app changes overtime avoiding them to have problem understanding them.
- Errors: Users make few errors when using the system
- Satisfaction: Users are subjectively/literally satisfied during use. The satisfaction can be measured by having a rating system or a review by giving comments what they have experienced.
When designing an app we need to think and consider about:
- Target audience (Users)
- User needs by designing based on user experience (e.g. thumb swiping), ease of use when users are familiarized with the icons.
- The word used cannot be lengthy, break the words use appropriate and maximize it, app needs a lot of information this can be help using the hamburger menu
When conducting a survey about apps we need to include:
- Personal details (Name, gender, age, occupation, Area you live by knowing the district)
- How much this person received their income, will they able to afford to buy an app? (Considering a free/ premium app) All choices will be based on their earning.
- What are your interconnected apps, what apps did u use, do you know the apps all about?
- We need to consider what apps that the people are looking forwards
- We need to consider their earning so that we can adjust the design to make it affordable since people usually compare one app to another looking for cheaper price. (E.g. Grab car vs. My car App)
- Avoid errors or problems we survey from another app such as when we are filling surveys and when we accidentally press back the answer disappeared
Tutorial 1: Introduction to PhoneGap
30 August, 2018 (Week 1)
On the first week of tutorial, we were asked to download PhoneGap app both on our laptop and phone device. This PhoneGap app will allow you to see our work of our html/css file done in our laptop using Dreamweaver in our phone. We were shown how to connect the PhoneGap app in our laptop to our phone device through dreamweaver. We make sure that the internet connection we are using is the same for both gadgets.
 |
| Fig. 1. Creating new project in Phone Gap on our Laptop |
- Native application: Uses native language and communication is direct. Example: JAVA is a native programming language. Each devices use different language such as windows, android, IOS.
- Web application: Uses html/ css. This helps the design of the app however there is no functionality on the phone. (Example: There is a call button, but cannot make a call only visual image that appears.)
- Hybrid application: It is a combination of native app and html/css. By using hybrid application, we can still be able to access the functionality on the phone, such as call button, you can really make a call. Hybrid app can also do for IOS & Android in 1 project. However, this hybrid app will run slower than the native app.
 |
| Fig 2. Coding in dreamweaver (html & css) |
 |
| Fig. 3. First exercise about me viewing in my phone using PhoneGap |
Lecture 2: User experience research
3 September, 2018 (Week 2)
On the second week of the class, our lecturer, Mr. Shamsul gave us a short lecture about user experience research as well as group activities done in class. We were divided into 4 groups where we all got different research method (Usability testing, interview/focus group, online surveys and user persona) to be discussed and presented in front of the class. As for my group we are presenting about Usability testing where we are presenting the first. During the presentation, Mr. Shamsul gave some inputs and information that is not in our slides. As for my group, we need to add some points into the slides to finalize it.
Second Group presented about Interviews
Third Group presented about Online Surveys
Forth Group presented about User Personas
Google drive link: https://drive.google.com/open?id=1-ju37QVgZQfFaqpYwCIMUv3Ok0E-4ZOV
Upon all the research method that all of us presented, the most common question that came up is ‘How many people needed to be conducted the survey so that the data gather will be reliable?’ This is answered by Mr. Shamsul by him showing a website called ‘SurveyMonkey’. This website isn't free, but once you paid for, it you can make surveys here, and the data will be directly be analyze in a reliable data. This website also tells you from a number of population how many people you need to conduct so that the data gathered will be reliable. Before class ended, Mr. Shamsul reminded us to pick a topic that we want to do for our mobile application project.
Tutorial 2: PhoneGap Exercise & Activity conducted in class
On the second week of the class, our lecturer, Mr. Shamsul gave us a short lecture about user experience research as well as group activities done in class. We were divided into 4 groups where we all got different research method (Usability testing, interview/focus group, online surveys and user persona) to be discussed and presented in front of the class. As for my group we are presenting about Usability testing where we are presenting the first. During the presentation, Mr. Shamsul gave some inputs and information that is not in our slides. As for my group, we need to add some points into the slides to finalize it.
Second Group presented about Interviews
Third Group presented about Online Surveys
Forth Group presented about User Personas
Google drive link: https://drive.google.com/open?id=1-ju37QVgZQfFaqpYwCIMUv3Ok0E-4ZOV
 |
| Fig.4. Survey Monkey website |
Tutorial 2: PhoneGap Exercise & Activity conducted in class
6 September, 2018 (Week 2)
On the second week of tutorial class with Mr. Razif, he went around to checked each and everyone's webpage in our phone making sure that it is working using the PhoneGap app. After looking at everyone's work, he added that we need to go back and revised our webpage to make it even better and make at least 3 pages. For my case, I will add 1 more page and need to add something to polish it, since the previous one I made it too simple. Below are my revised exercise,
I used hyperlink to go to the next page as well to the previous page. This hyperlink I added color and underline when it is hovered.
We continue our class with a group activity where we were divided into 4 groups and were asked to design a 'Nasi Lemak' vending machine. When we are designing it, we make sure it will be an ease to use, with a good placement interfaces.
All of the four groups designed a unique vending machine for Nasi Lemak. Each one of us drew in 1 full white board and presented it after we're done designing it.
As we're done designing, all of us presented it one by one and had a discussion on it. We gave comments and each group gets to ask question about the design interface. During presentation, Mr. Razif gave us feedback on the interface and usability. The feedback that we got is that, when we are designing we need to ask ourselves question to know what are the problems and possibilities that the users might face. Aside from that, when we are designing, we need to know what are the things we offer, if too many options it will result to confusion for people. The best thing to design is to direct them what to do directly.
The objective of this activity is to let us know and be aware of who are the users, we need to consider the customers whether or not the user interface is easy to use and understand. All of the activity that we are doing has a meaning behind it helping us to be aware of the possibilities that we might face to improve and avoid making mistake and considering the target audience who will use out machines that we designed. This considerations, opinions, feedbacks and what we have learnt applies when we are designing our mobile app.
On the second week of tutorial class with Mr. Razif, he went around to checked each and everyone's webpage in our phone making sure that it is working using the PhoneGap app. After looking at everyone's work, he added that we need to go back and revised our webpage to make it even better and make at least 3 pages. For my case, I will add 1 more page and need to add something to polish it, since the previous one I made it too simple. Below are my revised exercise,
 |
| Fig. 5. Revised exercise (About me) |
We continue our class with a group activity where we were divided into 4 groups and were asked to design a 'Nasi Lemak' vending machine. When we are designing it, we make sure it will be an ease to use, with a good placement interfaces.
 |
| Fig. 6. Designing Nasi Lemak Vending Machine |
 |
| Fig. 6.1. Nasi Lemak Vending Machine designed by my group (Group 2) |
 |
| Fig. 6.2. Nasi Lemak Vending Machine designed by group 1,3,4 |
The objective of this activity is to let us know and be aware of who are the users, we need to consider the customers whether or not the user interface is easy to use and understand. All of the activity that we are doing has a meaning behind it helping us to be aware of the possibilities that we might face to improve and avoid making mistake and considering the target audience who will use out machines that we designed. This considerations, opinions, feedbacks and what we have learnt applies when we are designing our mobile app.
Lecture 3: Public holiday
10 September, 2018 (Week 3)
Tutorial 3: PhoneGap Exercise & Activity conducted in class
13 September, 2018 (Week 3)
On the third week of tutorial class with Mr. Razif, we were introduced to "Realtimeboard.com" website where this website will help us breakdown the ideas.
Lecture 6: Online Research question
On the third week of tutorial class with Mr. Razif, we were introduced to "Realtimeboard.com" website where this website will help us breakdown the ideas.
 |
| Fig. 7. Template for breaking down ideas |
 |
| Fig. 7.1. My breakdown ideas |
- Key Positions: Unique selling point, What special features you can offer different from the other apps
- Key Activities: What are the other features available in the app
- Customer Segments: Target audience classified by age group, demographic(location)
- Key Partners: Without this particular partner, the business cannot run/ be executed. (E.g. Lazada: without delivery service, Lazada company cannot run and be executed)
- Key Sources: Who are the people involve in creating and designing the app (E.g. Researchers, Programmers)
- Channels: Any strategy to make the product out - Market Place(E.g. phones - Android, IOS - google store & Apple Store)
- Customer Relations: How to keep/ maintain the existing customers by giving promotions, vouchers, keep the customers updated.
- Cost Structure: The cost of people who are employed (E.g. People who are employed/ Channels - apple/ google store)
- Revenue Streams: Ideas that will earn revenue (E.g. Ads involve to gain more revenue/ memberships/ Cost per view/ Cost of Click ADs) - More Users more advantage of earning
Lecture 4: Finalizing the app idea
19 September, 2018 (Week 4)
On the fourth week of the class, we all double confirm our app's idea with Mr. Shamsul. We were also been reminded to carefully select the target audience wherein we cannot say the target audience is for everyone because it is to broad. All apps will have their target audience. Designing an app that is different from other apps is a tough one. As for my app's idea, Mr. Shamsul asked me to do a quick online survey or an interview to know my target audience clearly. Overall my idea is good to go.
As for class activity we were asked to find a similar app to the app that we are going to design. We need to compare and contrast with SWOT analysis. For my app, I do compare with Female fitness women workout app and 7 minutes workout app. I list down all their strength, weaknesses, opportunity and the app's threat.
On the fourth week of the class, we all double confirm our app's idea with Mr. Shamsul. We were also been reminded to carefully select the target audience wherein we cannot say the target audience is for everyone because it is to broad. All apps will have their target audience. Designing an app that is different from other apps is a tough one. As for my app's idea, Mr. Shamsul asked me to do a quick online survey or an interview to know my target audience clearly. Overall my idea is good to go.
As for class activity we were asked to find a similar app to the app that we are going to design. We need to compare and contrast with SWOT analysis. For my app, I do compare with Female fitness women workout app and 7 minutes workout app. I list down all their strength, weaknesses, opportunity and the app's threat.
Tutorial 4: Redesigning E- Boarding pass
20 September, 2018 (Week 4)
On the forth week of tutorial class with Mr. Razif, we were given a group activity in which we are asked to redesign an E-Boarding pass. The placement and hierarchy is what we are studying. The top placement usually is the most important thing to inform users.
Before we design digitally, we do some sketches, figuring out which is the best placement for certain information. During the planning of designing this boarding pass, it was not that easy as I thought because we need to plan according to hierarchy where the first top row will be the most important things, and to highlight some information, text can be bolded or increase in size.
As we presented our design in class, we were mistaken that we should have done the printed E-ticketing boarding pass not the printed boarding pass that we will receive in the airport counter. Nonetheless, the comment received from Mr. Razif is that, the barcode can be placed in a horizontally view so that people will not be rotating it. Aside from that, we need to see who is the target audience, different target people will have different placement and hierarchy of information. Example for this is that, the boarding pass on the left side usually is for the flight attendance, in this case the information that should be bolded should not be the same as the one for the customers who are seeing it. The flight attendance will be looking at the gate number whether or not the customers are in the right gate. Since that's the case the seating number should not be bolded because the priority looking of the flight attendance is not the seat number. So from the comments given, I realize that when we are designing we need to look closely who are the audience who will be using it and seeing it, we need to balance our design according to it's purpose to help the customers not merely placing them with no purpose. The placement, hierarchy and the style of the text is important during any kind of project designing.
As we should be making printed E-boarding pass, we came up with this design. This boarding pass still have room for improvement. I will still need to takes notes the placement and hierarchy when designing for better visualization.
On the forth week of tutorial class with Mr. Razif, we were given a group activity in which we are asked to redesign an E-Boarding pass. The placement and hierarchy is what we are studying. The top placement usually is the most important thing to inform users.
 |
| Fig. 8. Reference of E- boarding pass that we need to redesign |
 |
| Fig. 8.1. Sketches of Boarding Pass |
 |
| Fig. 8.2. Re-designing Printed Boarding Pass that will be given in the airport counter |
As we presented our design in class, we were mistaken that we should have done the printed E-ticketing boarding pass not the printed boarding pass that we will receive in the airport counter. Nonetheless, the comment received from Mr. Razif is that, the barcode can be placed in a horizontally view so that people will not be rotating it. Aside from that, we need to see who is the target audience, different target people will have different placement and hierarchy of information. Example for this is that, the boarding pass on the left side usually is for the flight attendance, in this case the information that should be bolded should not be the same as the one for the customers who are seeing it. The flight attendance will be looking at the gate number whether or not the customers are in the right gate. Since that's the case the seating number should not be bolded because the priority looking of the flight attendance is not the seat number. So from the comments given, I realize that when we are designing we need to look closely who are the audience who will be using it and seeing it, we need to balance our design according to it's purpose to help the customers not merely placing them with no purpose. The placement, hierarchy and the style of the text is important during any kind of project designing.
 |
| Fig. 8.3. Re-designing Printed E- Boarding Pass |
As we should be making printed E-boarding pass, we came up with this design. This boarding pass still have room for improvement. I will still need to takes notes the placement and hierarchy when designing for better visualization.
Lecture 5: Flowchat
26 September, 2018 (Week 5)
We learnt how to design a proper flowchart using 4 different shapes and its function. For us to understand better how the flowchart woks, we were given an exercise to make a flowchart on what will you do during your first date. For my process, during the date, I will be taking the girl to watch a movie (Flowchart of the guy's perspective) and end it by taking her back home.
Through this exercise, I found that it should be really clear in making the steps, we shouldn't lose any steps in order for the reader to understand the flow. This exercise is conducted in order for us to understand better before we create our own process flowchart for our mobile apps. In this exercise we were helped to do a correct flowchart and our lecturer will pin point the mistake that we make so that we will be clear and won't make the same mistake later on.
 |
| Fig. 9. Flowchart on taking a girl on his first date |
Tutorial 5: Flowchat Task
27 September, 2018 (Week 5)
For the tutorial class, we were asked to prepare a process flow chart based on the scenario:
Student application to a university. An international student applying for a place at Taylor's university. The potential student have already decided on which course to apply (Bachelor of Interactive Multimedia Design). Draw a complete process flow from the beginning (online application) until the end of the process (result from Campus Central).
For the tutorial class, we were asked to prepare a process flow chart based on the scenario:
Student application to a university. An international student applying for a place at Taylor's university. The potential student have already decided on which course to apply (Bachelor of Interactive Multimedia Design). Draw a complete process flow from the beginning (online application) until the end of the process (result from Campus Central).
 |
| Fig. 10. Flowchart on applying to Taylor's university through agent |
 |
| Fig. 10.1. Flowchart after I consulted Mr. Razif - some changes are applied |
 |
| Fig. 10.1. Final and digitalized Flowchart on applying to Taylor's university through agent |
Lecture 6: Online Research question
3 October, 2018 (Week 6)
On the sixth week, we really really are finalizing out app idea. For my app design idea will be in the category of Fitness App - Exercises to relieve muscle pain
Specific Goal: Exercises to help them relieve their muscle pain due to their work using computers.
Specific target audience: Middle age Female teachers in Bina Tunas Bangsa School (35-44 years old)
On this week, we are finalizing our question to conduct online survey however, I did my online survey earlier which I should have done it after consulting to Mr. Shamsul about the question that I came up with.
I got some feedback regarding my topic, he asked me to proceed with the idea already but need to refine my target audience so that I won’t have any problem when creating user persona. In class, Mr. Shamsul take a look at all of our online survey questionnaire. In my case, I conducted my online survey earlier. As I showed my questions to Mr. Shamsul, I should have categorize the questions so that it will be easier for me to analyze it. For a revision, I need to fix the structure of the questions so that one question to another will be related. He helped me constructed some of the questions and also listed down all the category that I should have. Aside from that, he reminded to conduct a question that won’t offend people as using the right words. Coming up with a question is not easy therefore, he suggested to know what is the goal of this questionnaire what am I trying to achieve. When the structure of my question is approved for the last time, then I will proceed to creating user personas and process flow chart.
On the next meeting in the tutorial class, we will be looking on User persona and create one.
Tutorial 6: User Persona
On the sixth week, we really really are finalizing out app idea. For my app design idea will be in the category of Fitness App - Exercises to relieve muscle pain
Specific Goal: Exercises to help them relieve their muscle pain due to their work using computers.
Specific target audience: Middle age Female teachers in Bina Tunas Bangsa School (35-44 years old)
On this week, we are finalizing our question to conduct online survey however, I did my online survey earlier which I should have done it after consulting to Mr. Shamsul about the question that I came up with.
 |
| Fig. 11. List of questions |
 |
| Fig. 11.1. Online survey conducted |
 |
| Fig. 11.2, Samples of User Persona |
Tutorial 6: User Persona
4 October, 2018 (Week 6)
On the sixth week of the tutorial class, we were given an exercise where we need to create a user persona so that we will be more familiar with it in creating our own about our designed app.
On the sixth week of the tutorial class, we were given an exercise where we need to create a user persona so that we will be more familiar with it in creating our own about our designed app.
Lecture 7 - 14: Focusing on Final Project
11 October, 2018 - 1 December (Week 7 - Week 14)
Comments
Post a Comment