(exercises) U S A B I L I T Y & M O B I L E A P P L I C A T I O N I
Aug 30 '18 - Nov 29 '18 (W1 - W14)
Jaslyn Tjhai (0333039)
Usability and Mobile Application I
Exercises
W E E K 1
August 29 2018
August 29 2018
On the first week of class, Mr. Shamsul briefed us on the module outline, what we will be doing and expecting for this module.
After explaining everything, Mr. Shamsul uploaded 2 articles on UX/UI for us to read and discuss together.
From the discussion, I came with the conclusion that:
- UX/User Experience leans more on the way users feel towards a certain product they are using, the overall experience the users get based on what they need
- UI/User Interface is more on how the product is laid out for the users based on what they need after looking at UX.
Therefore, in order to create and develop a good application, we must first understand UX and UI.
Based on the articles, we also discussed about Usability Principles and Attributes, where it is summarized into 4 after looking at what Nielsen (1993), Norman (2002), and Yeh (2010) proposed.
- Visibility, system provides information that is conducive for communication and interaction, as well as clear instructions.
- Ease, system is easy to learn and familiarize.
- Efficiency, system is easy to use and function at its full capacity.
- Enjoyment, users feel satisfied using the system
August 30 2018
On Mr. Razif's class, he helped each of us who are using iOS to download PhoneGap on our phone, which is one of the software that we will be using for this module. He also asked us to download the software on our laptop.
Mr. Razif then gave a short explanation on the different types of languages for coding.
- Native Programming is a kind of programming where for each device, there's a different programming language used. Example for Android: Java, iOS: Objective C, Windows: C/C++
- Web Application uses HTML, CSS, and JavaScript where it can be fitted on the phone but it can't access the phone's function
- Hybrid is a kind of programming where it is a combination of web and native programming using HTML and CSS. It can access the functionality of the phone which is available for both Android and iPhone
Mr. Razif also stated a few things that can help us on our project, where it can help channel our idea better and that is to always have and know what the goal or what the purpose of your application is for. For example, when creating an artist application, while looking at user's perspective, the first goal is to know what are the newest songs from the artist, second would be to know the most popular song, etc. After looking at those goals, we can try to see it from the artist/designer's perspective in which we will have this thing called Call To Action (CTA) where we think about what we want the user to do from then on.
E X E R C I S E 1
I started the exercise by typing all the content I wanted in the page itself in the source code. Afterwards, I started looking for images that I wanted to insert in my page as well as some icons that I downloaded online.
 |
| Fig. 1.a. Images used in my page |
 |
| Fig. 1.b. Symbol used beside content |
 |
| Fig. 1.c. Horizontal scrollbars |
 |
| Fig. 1.d. Code for changing the appearance of scrollbar |
onclick="window.open('http://www.facebook.com/jaslyntjhai', '_system');"All in all, this is how my page look from my phone screen.
 |
| Fig. 1.e. Overall look on PhoneGap |
W E E K 2
September 3 2018
On the second week of class, we have our lectures with Mr. Shamsul where he uploaded a short lecture on User Experience Research along with an exercise that we will be doing together as groups in class.
My group was assigned to present about User Personas. It was quite an interesting method of evaluating user's experience so I was really enjoying the process of reading the articles except for the fact that we have limited time to summarize all our findings so I can only read glimpse of everything.
After each of us prepared our slides, we presented and asked questions to each groups.
The first group presented about Usability Testing.
The first group presented about Usability Testing.
The second group presented about Interviews.
The third group presented about Online Surveys.
And lastly our group on User Personas.
During the discussions and presentations, the most common question that came up is
How many number of people should we interview and ask to answer surveys to ensure the data that we collected are reliable enough?Mr. Shamsul showed us how we can actually calculate the amount of data on Survey Monkey, to know how many response we need from a number of population. However we have to bear in mind that this is not accurate enough as there's no way for us to filter out the people that we are targeting.
Before the class ended, Mr. Shamsul reminded us to come up with the topics that we wanted to do for our mobile application.
September 6 2018
On Mr. Razif's class, he checked on our webpage from last exercise and gave each of us a feedback. He saw my and said that I should try to utilize the white spaces instead of leaving it as is because it looked empty. And that we have to emphasize on the page that is the most important one. Mr. Razif also asked us to continue working on that exercise where this time, instead of having all the information in one page, make it multiple pages (maximum of 3).
Then Mr. Razif gave us an exercise in class where we were divided into 4 groups and were asked to design a Nasi Lemak vending machine. We moved on to each of our group and started designing, then we drew whatever we designed on the whiteboard and presented.
 |
| Fig. 2.a. Nasi Lemak machine by my group (Group 4) |
 |
| Fig 2.b. Nasi Lemak machine by Group 1 |
 |
| Fig. 2.c. Nasi Lemak machine by Group 2 |
 |
| Fig. 2.d. Nasi Lemak machine by Group 3 |
All of us had a discussion after each presentation to ask questions on each of the machine that we designed while Mr. Razif also gave us a feedback based on the interface and usability. Mr. Razif then told us that the main objective of this exercise is to let us know that whenever we design a certain product for customers to use, we have to think about the customers, how easy is it for them to understand and learn the product in order for them to use comfortably, etc.
This exercise was interesting, same goes with Games Design, where not only we get to have fun but there's actually meaning behind what we are doing.
W E E K 3
September 13 2018
We were supposed to do an exercise today but instead of that, Mr. Razif consulted us one by one on our ideas for mobile application.
W E E K 4
W E E K 4
September 17 2018
On the fourth week, our class was changed to Wednesday due to public holiday on Monday, where Mr. Shamsul posted a few articles regarding UX/UI for us to read. From the articles, here are the few things I learned.
UX Laws:
- Hick's Law
The need to minimize choices to ease cognitive burden and help drive decision-making - Fitt's Law
Valuable advice on how we can ease interactions through the careful sizing and positioning of interface elements - Miller's Law
Emphasized the benefits of chunking to ease complex tasks
Fundamentals of UI Design:
- Know your user
- Pay attention to patterns
- Stay consistent
- Use visual hierarchy
- Provide feedback
- Be forgiving
- Empower your user
- Speak their language
- Keep it simple
- Keep moving forward
We were also asked to look for different types of apps which will be discussed in class. Here's what I found. I searched for both mobile apps and apps in general since it was not mentioned in task description that was posted.
Classification of Mobile Application:
- Lifestyle App, supports individual facets that define user's lifestyle
Example: Spotify, Fitness App, Health - Utility App, application that are used daily without knowing it's an app
Example: Calculator, Notes, etc. - Social Networking App, application that are used to connect with people and socialize
Example: Facebook, Twitter, Instagram - Games/Entertainment App, application that are used for entertainment
Example: Angry Birds, PubG, Mobile Legends - Productivity App, application that are used to accomplish certain task
Example: Google Docs, Google Drive, Wallet - News App, application that are used to get updates on what's happening around the world
Example: Flipboard, Wall Street Journal, Reddit
Types of Applications in the mobile realm:
- Native Apps, are apps that are created for certain operating system
Example: Instagram, Snapchat, Vine, Angry Birds - Hybrid Apps, combine the best of native and mobile web apps
Example: Walgreens, Netflix, Amazon, Evergreen - Web Apps, refers to website that are capable of rendering native app-like experiences on mobile devices
Example: Financial Times, Medium, The Washington Post, Gmail
 |
| Fig. 3.a. Illustrations of native, hybrid, and web app |
September 20 2018
In Mr. Razif's class, we were given an exercise where we were asked to redesign an Air Asia boarding pass. The first thing we need to do was to list down all the information that can be found on the online printed ticket then we were asked to prioritize the information based on what we think are the most important to the least important ones. This process is called information architecture. Here's what my group came up with.
 |
| Fig. 3.b. Exercise |
After considering and arranging all the information based on what we think are important. We designed the air ticket as shown below.
 |
| Fig. 3.c. Redesigned air ticket |
W E E K 5
September 26 2018
On the fifth week of class, Mr. Shamsul asked us to look for information on process flow.
Process Flow is a type of flowchart that shows steps and decisions needed to perform a process in a sequential order.
Purpose of flowchart (lucidchart.com):
Process Flow is a type of flowchart that shows steps and decisions needed to perform a process in a sequential order.
Purpose of flowchart (lucidchart.com):
- To document a process for better understanding, quality control, and training of employees
- To standardize a process for better efficiency and repeatability
- To study a process for efficiency and improvement. It helps to show unnecessary steps, bottlenecks and other inefficiencies.
- To model a better process or to create a brand new process
- To communicate and collaborate with better diagrams that speaks to various roles in the organization or outside of it
Mr. Shamsul explained about the process flow chart where he uploaded samples of flowchart on Google Classroom.
 |
| Fig. 4.a. Sample process flow chart 1 |
 |
| Fig. 4.b. Sample process flow chart 2 |
Then we were given an exercise to create a process flow chart with the topic 'What to do on a date' where we will be acting as the male and plan our first date to impress a girl. From the exercise, we really need to gather all the information needed, possible questions that would come up, etc. before we work on the chart itself. When each of us showed our exercise, we were given individual feedback. Mr. Shamsul told me that I cannot add a question to follow up another question. It should be followed by a task before another question is asked. Then I was told that before reaching a conclusion, it's best to have one last question before directly move straight to the conclusion.
We were also informed on our first project where our presentation will be on week 10 and we have to already prepare the online surveys and information gathered, create at least 3 personas, do usability testing, as well as 2 prototype (low fidelity and high fidelity).
After the exercise, we were asked to also start thinking about the process flow chart for our mobile application.
W E E K 6
We were also informed on our first project where our presentation will be on week 10 and we have to already prepare the online surveys and information gathered, create at least 3 personas, do usability testing, as well as 2 prototype (low fidelity and high fidelity).
September 27 2018
On Mr. Razif's class, it's more of a consultation class today so we were asked to do the exercise that Mr. Shamsul asked us to do regarding process flow chart where Mr. Razif will give us feedback directly in order to not drag time. This is the given scenario for us to create a process flow chart.
 |
| Fig. 4.c. Process flow chart exercise scenario |
I created the flow chart based on my experience as an international student and here's what I got.
 |
| Fig. 4.d. Process flow chart exercise |
W E E K 6
October 3-4 2018
There were no exercises on this week.
Comments
Post a Comment