Usability & Mobile Application I
Usability & Mobile Application I
Wu Xin Ying
0328708
Aug 2018 - Dec 2018
Usability & Mobile Application I
Lecture
Week 1
On the first class of this module, Mr Shamsul gave us an introduction of this module. He gave us a briefing about the exercises and assignments that we need to complete throughout the semester. After that, Mr Shamsul told us to read the 2 articles about Usability Principles and their attributes that posted in classroom and discuss about it.
Usability Principles and their attributes
Usability means user-centered design. Both the design and development process are focus around the prospective user to make sure their goals, mental models, and requirements are met to build products that are efficient and easy to use.
Visibility: The system provides users with information that is conducive to
communication and interaction, as well as clear instructions.
Ease: The system is easy to learn, and users can quickly familiarize themselves
with the system’s functions and operations, thus, time spent on learning is
minimal.
Efficiency: Once users have learned how to use the system, it is easy to use the
functions of the system at full capacity.
Enjoyment: Users feel satisfied upon completing a task when using the system.
UI ( User Interface) & UX ( User Experience)
UI ( User Interface) is the process of enhancing customer satisfaction and loyalty.
UX ( User Experience) a conglomeration of tasks focused on optimization of a product for effective and enjoyable use.
Week 2
For today's class, Mr Shamsul posted a lecture notes on google classroom about "Introduction To User Experience Research". We were divided to 4 groups and discuss about different approach of
User Experience Research Method. Each group was given a method to discuss and present in class.
All the presentation must include:
- Definition
- Way to conduct the method
- The best practice of the method
- Pros and Cons of the method
Usability Testing (Group 1)
Link to the slide:
https://docs.google.com/presentation/d/1F6JzS01PanPtEWZpbOWISWjjI4PREmZanzU-32O7H-U/edit?usp=sharing
Interviews/Focus (Group Group 2)
Link to the slide:
https://docs.google.com/presentation/d/1fcWupeQdAIG5XDTJUJBXId5av-bv09Fq9kkmiawCd6s/edit?usp=sharing
Online Surveys (Group 3)
Link to the slide:
https://docs.google.com/presentation/d/1MQfjlvrHlLrwgekbEKqcK8Ww16TSafkicfQbf9FFWpo/edit?usp=sharing
User Personas (Group 4)
Link to the slide:
https://docs.google.com/presentation/d/1mMrmdw3PV3I-rm3WCOAuu6oHeshe-bGmmj4FtXqdEok/edit?usp=sharing
Week 3
Class cancelled (Public holiday)
Week 4
For today class, Mr Shamsul discuss the type of apps in class that he told us to search for the the differences of them and examples. Mr Shamsul also discuss about the categories of mobile applications.
Type of Apps
Native Application
Native Application is one that is manufacture particularly for a specific cell phone and introduced straightforwardly onto the gadget itself and generally can work without requiring web availability relying upon the idea of the application. Native applications are developed for a specific platform and installed on a computing device.
Examples: LinkedIn, Facebook and Amazon.
Web Application
Web Application is an application program that is stored on a remote server and delivered over the Internet through a browser interface. Web applications are generalized for multiple platforms and not installed locally but made available over the Internet through a browser.
Examples: Gmail, GoogleDocs and Flipkart Lite.
Hybrid Application
Hybrid applications are web applications in the native browser, such as UIWebView in iOS and WebView in Android. Hybrid apps are developed using HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova.
Examples: Evernote, Netflix and Instagram.
Differences between Native, Web and Hybrid Apps
Categories of Mobile Applications
1. LIFESTYLE MOBILE APPS
Lifestyle app is one that accelerates or supports the individual facets that define your lifestyle. These types of mobile apps related to:
-Fitness
-Dating
-Food
-Music
-Travel
Examples of Lifestyle apps:
Spotify
Tripadvisor
Uber
2. SOCIAL MEDIA MOBILE APPS
Social media apps are some of the most popular types of mobile apps available. These kind of apps allow people to build social networks, and most of us check in with them every day. Social media apps have to be fun, fast, and continually integrating the expanding features of the social networks they support.
Examples of social media apps:
Facebook
Instagram
Pinterest
Snapchat
3. UTILITY MOBILE APPS
Utilities are the types of mobile apps that we may use most often without thinking about them as apps. Many of them come pre-installed on your device and serve a single function.
Examples of mobile apps in the utility category are:
Reminders
Calculator
Flashlight
Weather
4. GAMES/ENTERTAINMENT MOBILE APPS
The gaming and entertainment category are huge, and as such, very competitive. Games are one of the more obvious mobile app categories and need little explanation. These types of apps are popular among developers because they bring users back multiple times each week, sometimes multiple times per day.
Examples of game apps:
Board King
Angry Birds
Clash of Clans
Subway Surfer
5. PRODUCTIVITY MOBILE APPS
These types of apps help their users accomplish a task quickly and efficiently, making what are sometimes mundane tasks easier and fun.
Examples of productivity apps:
Docs
Sheets
Wallet/Pay
6. NEWS/INFORMATION OUTLETS MOBILE APPS
News and information apps are pretty straightforward. They supply their users with the news and information they’re looking for in an easy to understand layout that efficiently navigates them to the things they care about most.
Examples of different types of popular news apps:
Buzzfeed
Smartnews
Google News & Weather
Feedly
Flipboard
Yahoo News Digest
Reddit
Linkedin Pulse
For our assignment, Mr Shamsul told us to finalize our idea and our target audiences need to be specific. After that, he asked us to find two similar Apps with our final idea and do SWOT analysis.
Week 5
For today class, Mr Shamsul brief us on our presentation of app and told us what we need to do and complete for the presentation. After that, Mr Shamsul taught us about the way and the basic shape that we need to use to create a flow chart.
After that, Mr Shamsul gave us an exercise which need us to design a flow chart for first time date.
Title: As a male that wanted to date a girl for first time, we need to plan a process flow chart for a date of an entire day.
Week 6
On today class, Mr Shamsul uploaded a project timeline for us on google classroom. He told us to follow the timeline and update the timeline weekly so that we will able finish the assignment on time.
After that, Mr Shamsul asked us to prepare our survey. He told us to think about the objective of survey clearly and what we want to know from the survey and create a survey questionnaires. He also told us to create three user persona according to our target audiences. He told us that it is not necessary to create all the user persona according to our main target audiences, it also can be someone that may use the app.
Tutorial
Week 1
At the first class of tutorial for this module, Mr Razif asked us to download Adobe PhoneGap for our laptop and mobile devices. PhoneGap enables us to connect with Adobe Dreamweaver and preview in our mobile devices.
Week 2
For today's tutorial class, before Mr Razif start the class for today, Mr Razif checked and have a look at everyone's website in Phonegap and make sure that everyone's website is working and connected to Phonegap app in our phone. After that, Mr Razif told us to create more pages about us by adding the button of "previous" and "next".
After that, we were randomly separated into 4 groups and each group have to design a vending machine and sketch it out on the board and share in class.
After that, each group have to present their own vending machine's design interface to the whole class. Mr Razif asked everyone to discuss and gave some feedback to other groups' vending machine. Mr Razif also gave comments to every groups on how to improve the interface and usability of the design. For my group, Mr Razif said that our vending machine was too big and occupied a lot of spaces which need a large costs to build it. Moreover, Mr Razif also commented that the interface of our vending machine had a lot of empty spaces. We also need to include the fork and spoon for the vending machine and the tray was not suitable to use as it was not able to take away.
Week 3
For today's tutorial, Mr Razif gave us an introduction on Real-Time Board. He asked us to write down the important information and objective of our project into the board according to the example shown.
Week 4
For today class, Mr Razif asked us to rearrange and redesign the Air Asia boarding pass that he given. First, he told us to list down all the information that included in the boarding pass that he given and rearrange the information according to their priority.
Mr Razif divided us into few groups to complete the exercise given. After some discussion with my teammates, we started to design our new boarding pass. After that, we have to present it to the class and explain what changes we have made and the reasons. Each group will get the feedback from class mates and Mr Razif after the presentation. For our group, Mr Razif said that the size of the name and the locations have to be smaller as the user already knew those information and they will not check these information frequently. After that, he also said that the number of flight should be inside the box as it is an important information for user. Mr Razif also said that the advertisement is not necessary and it can be remove from the boarding pass.
After receiving the feedback, we made some changes on our first design of boarding pass.
Week 5
For today class, Mr Razif told us to complete the exercise that posted by Mr Shamsul in google classroom.
Exercise:
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).
Week 6
For today tutorial, Mr Razif told us to make at least three user personas for our assignment. The user persona not necessary have to be all the main target audience, it also can me secondary target audience or someone that may use the app.
Week 7
For today class, Mr Razif told us to done our process flow chart for our App and start to design the wireframe for our assignment. After finished my flow chart, I showed it to Mr Razif. Mr Razif said that my flow chart is okay but need to change some of the features which is not necessary and not clear.
Week 8
For today class, there's no tutorial today as we are told to conduct our app usability test in junior class. I done an usability test with my junior and I get some feedback from them. From their feedback, they said that some of my alignment should be adjust and some of the pages are unable to connect. The others are good.
Week 9
For today class, Mr Shamsul have a consultation regarding to our project. From the consultation, Mr Shamsul told me to make my logo simple and change the app's name as the term "doctor" is someone who treats patient but not someone who provide the first aid information.
Week 10
Today is the presentation of our project to Mr. Shamsul and Mr. Razif. From the feedback of Mr Shamsul and Mr Razif, Mr Razif said that my logo is nice and simple. For the wire frames, they said that some of my alignment need to be adjust and my list bar is too big. Mr Shamsul said that the thickness of my icon is not balance and it looks messy. Mr Razif also said that there is not necessary to place a finger on the top of the emergency button, it is enough for just the button there.
Link to the presentation slide :
https://docs.google.com/presentation/d/1fXeUrrX4we9hoMxVcx09gWJ3XTfmwlEcPxUS7dMwk1A/edit?usp=sharing
Wu Xin Ying
0328708
Aug 2018 - Dec 2018
Usability & Mobile Application I
Lecture
Week 1
On the first class of this module, Mr Shamsul gave us an introduction of this module. He gave us a briefing about the exercises and assignments that we need to complete throughout the semester. After that, Mr Shamsul told us to read the 2 articles about Usability Principles and their attributes that posted in classroom and discuss about it.
Usability Principles and their attributes
Usability means user-centered design. Both the design and development process are focus around the prospective user to make sure their goals, mental models, and requirements are met to build products that are efficient and easy to use.
 |
| Fig.1. Usability Principles |
Visibility: The system provides users with information that is conducive to
communication and interaction, as well as clear instructions.
Ease: The system is easy to learn, and users can quickly familiarize themselves
with the system’s functions and operations, thus, time spent on learning is
minimal.
Efficiency: Once users have learned how to use the system, it is easy to use the
functions of the system at full capacity.
Enjoyment: Users feel satisfied upon completing a task when using the system.
UI ( User Interface) & UX ( User Experience)
UI ( User Interface) is the process of enhancing customer satisfaction and loyalty.
UX ( User Experience) a conglomeration of tasks focused on optimization of a product for effective and enjoyable use.
 |
| Fig.2.Similarities and Differences between UI ( User Interface) & UX ( User Experience) |
Week 2
For today's class, Mr Shamsul posted a lecture notes on google classroom about "Introduction To User Experience Research". We were divided to 4 groups and discuss about different approach of
User Experience Research Method. Each group was given a method to discuss and present in class.
All the presentation must include:
- Definition
- Way to conduct the method
- The best practice of the method
- Pros and Cons of the method
Usability Testing (Group 1)
Link to the slide:
https://docs.google.com/presentation/d/1F6JzS01PanPtEWZpbOWISWjjI4PREmZanzU-32O7H-U/edit?usp=sharing
Interviews/Focus (Group Group 2)
Link to the slide:
https://docs.google.com/presentation/d/1fcWupeQdAIG5XDTJUJBXId5av-bv09Fq9kkmiawCd6s/edit?usp=sharing
Online Surveys (Group 3)
Link to the slide:
https://docs.google.com/presentation/d/1MQfjlvrHlLrwgekbEKqcK8Ww16TSafkicfQbf9FFWpo/edit?usp=sharing
User Personas (Group 4)
Link to the slide:
https://docs.google.com/presentation/d/1mMrmdw3PV3I-rm3WCOAuu6oHeshe-bGmmj4FtXqdEok/edit?usp=sharing
Week 3
Class cancelled (Public holiday)
Week 4
For today class, Mr Shamsul discuss the type of apps in class that he told us to search for the the differences of them and examples. Mr Shamsul also discuss about the categories of mobile applications.
Type of Apps
Native Application
Native Application is one that is manufacture particularly for a specific cell phone and introduced straightforwardly onto the gadget itself and generally can work without requiring web availability relying upon the idea of the application. Native applications are developed for a specific platform and installed on a computing device.
Examples: LinkedIn, Facebook and Amazon.
Web Application
Web Application is an application program that is stored on a remote server and delivered over the Internet through a browser interface. Web applications are generalized for multiple platforms and not installed locally but made available over the Internet through a browser.
Examples: Gmail, GoogleDocs and Flipkart Lite.
Hybrid Application
Hybrid applications are web applications in the native browser, such as UIWebView in iOS and WebView in Android. Hybrid apps are developed using HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova.
Examples: Evernote, Netflix and Instagram.
Differences between Native, Web and Hybrid Apps
Categories of Mobile Applications
1. LIFESTYLE MOBILE APPS
Lifestyle app is one that accelerates or supports the individual facets that define your lifestyle. These types of mobile apps related to:
-Fitness
-Dating
-Food
-Music
-Travel
Examples of Lifestyle apps:
Spotify
Tripadvisor
Uber
2. SOCIAL MEDIA MOBILE APPS
Social media apps are some of the most popular types of mobile apps available. These kind of apps allow people to build social networks, and most of us check in with them every day. Social media apps have to be fun, fast, and continually integrating the expanding features of the social networks they support.
Examples of social media apps:
Snapchat
3. UTILITY MOBILE APPS
Utilities are the types of mobile apps that we may use most often without thinking about them as apps. Many of them come pre-installed on your device and serve a single function.
Examples of mobile apps in the utility category are:
Reminders
Calculator
Flashlight
Weather
4. GAMES/ENTERTAINMENT MOBILE APPS
The gaming and entertainment category are huge, and as such, very competitive. Games are one of the more obvious mobile app categories and need little explanation. These types of apps are popular among developers because they bring users back multiple times each week, sometimes multiple times per day.
Examples of game apps:
Board King
Angry Birds
Clash of Clans
Subway Surfer
5. PRODUCTIVITY MOBILE APPS
These types of apps help their users accomplish a task quickly and efficiently, making what are sometimes mundane tasks easier and fun.
Examples of productivity apps:
Docs
Sheets
Wallet/Pay
6. NEWS/INFORMATION OUTLETS MOBILE APPS
News and information apps are pretty straightforward. They supply their users with the news and information they’re looking for in an easy to understand layout that efficiently navigates them to the things they care about most.
Examples of different types of popular news apps:
Buzzfeed
Smartnews
Google News & Weather
Feedly
Yahoo News Digest
Linkedin Pulse
For our assignment, Mr Shamsul told us to finalize our idea and our target audiences need to be specific. After that, he asked us to find two similar Apps with our final idea and do SWOT analysis.
Week 5
For today class, Mr Shamsul brief us on our presentation of app and told us what we need to do and complete for the presentation. After that, Mr Shamsul taught us about the way and the basic shape that we need to use to create a flow chart.
 |
| Symbols use in Flow Chart |
After that, Mr Shamsul gave us an exercise which need us to design a flow chart for first time date.
Title: As a male that wanted to date a girl for first time, we need to plan a process flow chart for a date of an entire day.
 |
| Sample of process flow chart given by Mr Shamsul |
 |
| Sample of process flow chart given by Mr Shamsul |
Week 6
On today class, Mr Shamsul uploaded a project timeline for us on google classroom. He told us to follow the timeline and update the timeline weekly so that we will able finish the assignment on time.
 |
| Project Timeline |
After that, Mr Shamsul asked us to prepare our survey. He told us to think about the objective of survey clearly and what we want to know from the survey and create a survey questionnaires. He also told us to create three user persona according to our target audiences. He told us that it is not necessary to create all the user persona according to our main target audiences, it also can be someone that may use the app.
 |
| Example of User Persona give by Mr Shamsul |
Tutorial
Week 1
At the first class of tutorial for this module, Mr Razif asked us to download Adobe PhoneGap for our laptop and mobile devices. PhoneGap enables us to connect with Adobe Dreamweaver and preview in our mobile devices.
Week 2
For today's tutorial class, before Mr Razif start the class for today, Mr Razif checked and have a look at everyone's website in Phonegap and make sure that everyone's website is working and connected to Phonegap app in our phone. After that, Mr Razif told us to create more pages about us by adding the button of "previous" and "next".
After that, we were randomly separated into 4 groups and each group have to design a vending machine and sketch it out on the board and share in class.
 |
| Vending machine design (group 1-my group) |
 |
| Vending machine design (group 2) |
 |
| Vending machine design (group 3) |
 |
| Vending machine design (group 4) |
Week 3
For today's tutorial, Mr Razif gave us an introduction on Real-Time Board. He asked us to write down the important information and objective of our project into the board according to the example shown.
Week 4
For today class, Mr Razif asked us to rearrange and redesign the Air Asia boarding pass that he given. First, he told us to list down all the information that included in the boarding pass that he given and rearrange the information according to their priority.
 |
| Air Asia's boarding pass given by Mr Razif |
 |
| First Design |
After receiving the feedback, we made some changes on our first design of boarding pass.
 |
| Design after feedback |
Week 5
For today class, Mr Razif told us to complete the exercise that posted by Mr Shamsul in google classroom.
Exercise:
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).
 |
| My completed flowt chart |
After showing Mr Razif, Mr Razif said that overall is good but some of the steps can be combine so that it looks simple. Moreover, he also commented that the position of "Yes" and "No" are not clear and have to make some adjustment.
Week 6
For today tutorial, Mr Razif told us to make at least three user personas for our assignment. The user persona not necessary have to be all the main target audience, it also can me secondary target audience or someone that may use the app.
 |
| My first user persona |
 |
| My second user persona |
 |
| My third user persona |
Week 7
For today class, Mr Razif told us to done our process flow chart for our App and start to design the wireframe for our assignment. After finished my flow chart, I showed it to Mr Razif. Mr Razif said that my flow chart is okay but need to change some of the features which is not necessary and not clear.
 |
| Flow chart of my App ( First Aid) |
Week 8
For today class, there's no tutorial today as we are told to conduct our app usability test in junior class. I done an usability test with my junior and I get some feedback from them. From their feedback, they said that some of my alignment should be adjust and some of the pages are unable to connect. The others are good.
Week 9
For today class, Mr Shamsul have a consultation regarding to our project. From the consultation, Mr Shamsul told me to make my logo simple and change the app's name as the term "doctor" is someone who treats patient but not someone who provide the first aid information.
Week 10
Today is the presentation of our project to Mr. Shamsul and Mr. Razif. From the feedback of Mr Shamsul and Mr Razif, Mr Razif said that my logo is nice and simple. For the wire frames, they said that some of my alignment need to be adjust and my list bar is too big. Mr Shamsul said that the thickness of my icon is not balance and it looks messy. Mr Razif also said that there is not necessary to place a finger on the top of the emergency button, it is enough for just the button there.
Link to the presentation slide :
https://docs.google.com/presentation/d/1fXeUrrX4we9hoMxVcx09gWJ3XTfmwlEcPxUS7dMwk1A/edit?usp=sharing
Comments
Post a Comment