Tan Shin Yih (0334900)
Usability and Mobile Applications I
Assignment's blog link: http://shinyih1997.blogspot.com/2018/09/usability-and-mobile-applications-i_25.html
Week 1 ( 27/8/2018 )
On the first week of the class, Mr. Shamsul introduced us to usability & Mobile Application is all about. He also told us about usability principles and interface attributes.
According to Nielsen, there are 5 usability attributes:
1. Learnability: User can easily learn without complicating ourselves to learn so hard to understand it.
2. Efficiency: User has learned the system, and a high level of productivity is possible. The user gains something from using the apps. (E.g. Adobe Illustrator software, if you know the software you can make an incredible work from it.)
3. Memorability: Does not require a lot of things to learn, it's in your head, immediately recognize and able to use the system such as the 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 the problem understanding them.
4. Errors: Users make few errors when using the system
5. Satisfaction: Users are subjectively/literally satisfied during use. The satisfaction can be measured by having a rating system or a review by giving comments on what they have experienced.
According to Norman, there are 4 usability attributes:
1. Visibility: the user can know the state of the device and alternatives for action
2. A good conceptual model: designer provides a good conceptual model for the user, with consistency in the presentation of operations
3. Good mappings: it is possible to determine the relationships between actions and results, between the controls and their effects, and between the system state and what is visible
4. Feedback: the user receives full and continuous feedback regarding the results of actions(Norman 2002).
According to Yeh, there are 3 usability attributes:
1. Effective: it is able to successfully assist users in completing tasks and achieving goals
2. Easy: it can help users reduce four particular elements: memory work, physical work, visual work, and unnecessary work
3. Enjoyable: it can bring users pleasure in physio-pleasure, socio-pleasure, psycho-pleasure, and ideo-pleasure levels(Yeh 2010).
These are the summarized of Usability Principle and Attributes after looking at what Nielsen (1993), Norman (2002), and Yeh (2010) proposed:
1. Visibility: The system provides users with information that is conducive to
communication and interaction, as well as clear instructions.
2. 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.
3. Efficiency: Once users have learned how to use the system, it is easy to use the
functions of the system at full capacity.
4. Enjoyment: Users feel satisfied upon completing a task when using the system.
Mr.Shamsul also tell us that when we designing an app, we need to consider about our target audience. The mobile app should be design based on user experience so that user able to know how to use the app, such as thumb swiping. Some user also able to use the app when using the icons that people always see. Besides that, the app will be using mobile to see and it is hard to see if there are a lot of information, that why people using the design like the hamburger menu or read more button.
Mr.Shamsul asked us to do a research about what is the difference between UI and UX design. From my research, User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals.
UX:
1. User Experience Design is the process of development and improvement of quality interaction between a user and all facets of a company.
2. User Experience Design is responsible for being hands-on with the process of research, testing, development, content, and prototyping to test for quality results.
3. User Experience Design, in theory, a non-digital (cognitive science) practice, but used and defined predominantly by digital industries.
UI:
1. User Interface Design is responsible for the transference of a brand’s strengths and visual assets to a product’s interface to best enhance the user’s experience.
2. User Interface Design is a process of visually guiding the user through a product’s interface via interactive elements and across all sizes/platforms.
3. User Interface Design is a digital field, which includes responsibility for cooperation and works with developers or code.
Week 1 ( 30/8/2018 )
On Mr. Razif class, he asked us to download PhoneGap in our laptop and also to our mobile phone. This software will be using for this module and easy for us to see the outcome and compare the difference with the pc. Besides that, Mr. Razif also explains to us some different types of languages for coding.
1. 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++
2. Web Application uses HTML, CSS, and JavaScript where it can be fitted on the phone but it can't access the phone's function.
3. 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.
Then, Mr. Razif showed us how to connect Dreamweaver with PhoneGap. And ask us to do a short exercise, to make a page about ourselves as a recap for HTML and CSS.
This is the page that I design and create about myself using Dreamweaver and PhoneGap.
Role of UX Designer:
1. User Research: can be in a lot of form, questionnaire, interviews, set up a focus group to get feedback.
2. Wireframing: come out a wireframe for the particular products or website/ app.
3. Prototype Testing
4. A/B testing: have a different version of layout and design but the same functionality website, every people that go to the website might be seeing version A or B, then compare the behavior for both versions.
5. Usability Testing: behavior of user while using your app
6. Overseeing Development: oversee the overall design.
7. Analytics and Tracking Goals: to find out how many people visit, how many people stay, how long do they stay, how many people download and how many people launch the app after the application upload to the app store. ( eg. google analytic )
8. Iteration: changes a new version of the application after getting the feedback.
Role of UI Designer:
1. Maintaining brand consistency
2. UI prototyping: make sure that can be view on the different phone
3. Adapting content for different devices and screen sizes
4. Demonstrating interactivity and animation
5. Implementation with developers
Mobile Design is the creation of user experiences for the mobile content. Mobile doesn't have a mouse, so can avoid the hover effect. It has a smaller screen and many variations ( portrait, landscape ), limited battery life, limited CPU ( processing power ), limited memory ( RAM ), limited space, many platforms and technologies ( IOS, Andriod )
Tips & Techniques for Mobile App:
1. Design for humans: don't just design on a computer, need to think of human behavior ( eg. size of a button for human )
2. Do research and prototypes: understand your user and experience
3. Get something on device quick: solve design problems on context
4. Pixel size will like to vary: as will pixel density on many devices
5. Color will vary between devices: no standard gamut or depth
6. Different technology on mobile: flash, SVG, AJAX (javascript) are non-standard
7. Create compositions: button = base + effect + icons
8. Design flexible layouts: fluid design accommodating variable widths
9. Optimize for file size & memory: render just-in-time if possible, reduce the size of the picture
Practical tips
This is the original design and button made by jpeg and just fit one type of device and if use it with landscape need to recreate a new one, so will make the file size bigger and if for another device still need to design another one.
This is the simplified design, using CSS and it can be fit on the different device.
Week 2 ( 3/9/2018 )
Today, Mr. Shamsul upload tutorial slides at google classroom for us about user experience research. Then we randomly separate into 4 group and having a group activity to discuss the different approach of user experience research method ( usability testing, interview/focus group, online surveys, and user persona) and present to our classmate. ( find its definition from 2-3 different sources, discuss how to conduct the method, the best practice, Pros, and Cons ) My group is to present Interview. We need to summarize all our finding and make it into slides to show to our classmate.
The first group is present for Usability Testing. ( https://docs.google.com/presentation/d/1F6JzS01PanPtEWZpbOWISWjjI4PREmZanzU-32O7H-U/edit?usp=drive_open&ouid=102211722106914716991 )
The second group is my group. We present for Interview.
( https://docs.google.com/presentation/d/1fcWupeQdAIG5XDTJUJBXId5av-bv09Fq9kkmiawCd6s/edit#slide=id.p )
The third group present for Online Surveys.
( https://docs.google.com/presentation/d/1MQfjlvrHlLrwgekbEKqcK8Ww16TSafkicfQbf9FFWpo/edit#slide=id.p )
And the last group present User Persona.
( https://docs.google.com/presentation/d/1mMrmdw3PV3I-rm3WCOAuu6oHeshe-bGmmj4FtXqdEok/edit#slide=id.g414b3acfb2_2_1 )
Before the class ended, everyone comes out with a question "How many numbers of people should we interview/ find for surveys to ensure the data collected are reliable enough?" Then, Mr. Shamsul tells us that we can calculate the amount of data on Survey Monkey to know how many people we need from a number of population.
Week 2 ( 6/9/2018 )
Today, Mr. Razif checked and help who can't connect the website to the phone gap to make sure that everyone website connects to phone gap. Then, Mr. Razif asks us to make at least 3 page for our website, so we need to add the next page and back to the previous page at the bottom of our website.
Then Mr. Razif divided us into 4 groups and give us an exercise is to design a Nasi Lemak vending machine. We need to discuss the design, layout and the menu of the vending machine and draw it out on the whiteboard and present to our classmate.
This is the Nasi Lemak vending machine design by Group 2 (my group).
Nasi Lemak vending machine design by Group 1
Nasi Lemak vending machine design by Group 3
Nasi Lemak vending machine design by Group 4
After we design the machine, all of us present our own design by the group and everyone gives others group some question and comments about the design interface. Mr. Razif also gives us some feedback on the interface and usability. Mr. Razif asks us to identify the problem that we might be meet for our design interface because it might also the problem that our user's face. Besides that, Mr. Razif also asks us to prevent "too many choices" for our customer. The more choices the more problem, too many options might be confusing or hard to decide for some people. The best design is to directly tell people what to do, simple and easy for the user.
The things that I learned in this activity is to understand what user need and try to minimize the problem that user might be questioned. Same to our mobile app, we need to design an app that simple and easy for the user to understand according to our target audience.
Layers of Mobile Experience
1. Idea: This first thing we need is an idea that inspires us ( eg. never to be stuck in traffic? )
2. Needs & Goals: Identify a basic need with our desire user ( eg. create an app to check traffic conditions )
3. Context: The circumstances where information adds value ( eg. people can check when they need to out of office )
4. Strategy: How we can add value to the business
5. Device Plan: Choose the devices that best serves our audience
6. Design: Create a user experience based around needs
7. Prototype: Test the user experience within the context
8. Development: Put all the pieces together
9. Testing
10. Optimization: Reduce all assets to its lowest possible size
11. Porting: Adapt for other devices that fit our strategy
Week 3 ( 10/9/2018 )
Public Holiday.
Week 3 ( 13/9/2018 )
Today, Mr. Razif introduce real-time board to us. He asks us to break down our idea for the first assignment with this board.
Key Position: App selling point, what makes your app special
Key Activities: Other features on your app
Customer Segments: Target Audience (eg. age, location.. )
Key Partner: Partner that make your business happen ( eg. Lazada need Postlaju )
Key Resources: People involve to create the thing that you want to run in your app ( eg. Graphic Designer, IT... )
Channels: Channel can distribute your app to your customer ( eg. Andriod - Play store )
Revenue Streams: Idea to earn money ( eg. download for free but with ads, free but pay for premium, cost per view, cost per click )
Cost Structure: Total cost will be used for the app ( eg. employer, workspace, channel, ads... )
Customer Relation: Maintain existing customer ( eg. promotion voucher )
Mobile UX Experience
1. Know your smartphone & touchscreen devices
2. Common oversights: a look at common mistakes in designing mobile apps
- readability: add spacing and make word bigger
- navigation: avoid small hotspot, use spacing and visual indicator
- pagination: indicating current and total pages, using "load more.."
- button: big juicy button, great to tap
- input: enlarged input and styled accordingly, visual feedback when tapped
- search: instead of putting on one page, why not put it as overlaying layer
- call to action: separation and color button for accepting and canceling
Week 4 ( 16/9/2018 )
Public Holiday.
On the holiday of class, Mr. Shamsul gives us an exercise to find out the different type of app and example for each app.
Different type of app:
1. Native app (for high-performance apps), developed to use on a particular platform or device, written for a specific platform, can interact with and take advantage of operating system features and other software that is typically installed on that platform, most reliable, showing extraordinary performance when compared to hybrid and web apps.
Example: google maps, facebook. (high price, long development time)
2. Hybrid app (for banks, news, media, and content delivery platforms), a compromise between web and native app development, a web app packed in a native app container, written in HTML, CSS and JavaScript, distributed through the app store or Over-the-Air for iOS devices.
Example: Amazon, Netflix. (limited performance)
3. Web app (for news, weather, e-commerce, social apps, currency converters, expense managers, etc), built with HTML, CSS, and JavaScript, there are also web app frameworks - sets of tools which make the development process faster and more efficient.
Example: Gmail, google docs. (cheapest option to develop)
Mr. Shamsul also provides some useful article for our App Design.
1. http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
2. https://www.smashingmagazine.com/2018/02/comprehensive-guide-user-experience-design/
3. https://articles.uie.com/experiencedesign/
Week 4 ( 19/9/2018 )
Today, Mr. Shamsul gives us a replacement class because Monday is a public holiday. He asked us to research the type of application. Then, I found this table that compares the 3 type of mobile application.
Besides that, he also asks us to find the categories of the mobile application. Here are some categories of the mobile application that I found.
1. Gaming App ( eg. clash of clans, candy crush saga... )
2. Business App ( eg. Adobe Acrobat Reader... )
3. Educational App ( eg. TED, Lumosity – Brain Training... )
4. Life Style App: shopping, fitness and workout tracker to fashion, virtual fitting room, and even weight loss ( eg. shopee... )
5. Entertainment App ( eg. Netflix... )
6. Utility App ( eg. bitmoji... )
7. Travel App ( eg. Uber, Airbnb... )
Mr. Shamsul also shares some mobile application that he uses that is nice for us. We share some nice mobile app that we found nice and discuss with our classmate. Mr. Shamsul asks us to confirm our final idea and also find at least 2 similar application and compare the resources of those applications and do the SWOT analysis. He also asks us to target our target audience and make sure we focus on one group of people for our application because a general application is too broad.
Week 4 ( 20/9/2018 )
During Mr. Razif class, he gives us a picture of boarding pass AirAsia and asks us to redesign a new boarding pass for it. He asked us to list down all the information that we can find on the picture, then arrange the information follow the importance. We can also delete the information that we think that not usable.
Here is the design of my group for the boarding pass. After showing to our classmate, they have given us some comment and feedback to make the boarding pass better. At first, Mr. Razif asks us to put the Flight No inside the box because the design looks like out of the box, people might be missing the information. Besides that, user's name and place to flight can be smaller because people won't keep on checking their name and where to go. Mr. Razif says that he like the way we put the gate close, gate no and seat no into a box so that makes user clear.
Here is the final outcome of our boarding pass after concluding all the feedback and comments.
Week 5 ( 26/9/2018 )
Today, we have a replacement class of Monday classes. Mr. Shamsul has a short briefing with us about the presentation on our project 1. Then, he starts explaining to us the process flowchart.
circle shape: start, end
diamond shape: question, decision
square shape: step, task
arrow: direction
Here is the sample that Mr. Shamsul sent to us as a reference.
Then, we have a small exercise for this process flowchart to make sure we are clear on this chart. Mr. Shamsul asks us to plan the first date as a male to date a girl and using the process flowchart to plan the whole day dating and show it to him one by one for consultation.
Mr. Shamsul told me that my process flowchart is okay, part of it is very clear but some part the gap between the arrow is too big and might make people confuse. He suggests me to try rearranging the plage or the boxes place to reduce the gap so that the chart will be more clear.
Week 5 ( 27/9/2018 )
Today, Mr. Razif asks us to do the exercise that Mr. Shamsul posted on google class yesterday by today class and he gave us one to one consultation after we finish the exercise.
Our task is 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 has 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).
This is my process flowchart for the exercise. Mr. Razif told me that mine is okay, compare with others is more like a summary of all the steps, can be more details and more question but this also can. After giving consultation for everyone, Mr. Razif asks us to come out with the process flowchart of our own app.
Week 6 ( 3/10/2018 )
Today, Mr. Shamsul share a project timeline with us. He asks us to update the project timeline every week so that he can check on our progression on our assignment.
Mr. Shamsul also asks us to update our proposal of mobile application on our target audience and goals. We will need to set specific target audiences and also list the specific goals of our app in the proposal and present to him. He also asks us to start to think about our online survey questions and share the survey to collect the data and make a user persona by this week and show it to him by next week class. Mr. Shamsul shared a sample of user persona and explains what to edit and what to add in the user persona.
Before the class end, Mr. Shamsul reminds us to do the progress flowchart of our app and show it to him and Mr. Razif during class on Thursday.
Week 6 ( 4/10/2018 )
Today, Mr. Razif ask us to continue with our user persona for assignment 1. Mr. Razif asks us to do at least 3 user persona. One for our first target audience, then second for our secondary audience and the third one for others possible audiences.
Mr. Razif also told us that we can use the user personal that we create to check our final target audience after collecting the data from the online survey. We need to adjust the app by using the data of the survey and the user personal as the references.
MC.
On today class, Mr. Razif asks us to continue with our progress flowchart of our app. He also asks us to design on the wireframe of our app design. We can start to do the first draft wireframe by using paper or using Adobe XD. Mr. Razif gives us to consult one on one. Here is my process flow chart after consult with Mr. Razif.
On today class, Mr. Shamsul asks us to continue with our wireframe design. I show my process flowchart and user persona for Mr. Shamsul as I miss his class last week. Mr. Shamsul ask me to continue with wireframe and do the usability test first then only can check whether the process flowchart will works.
Mr. Shamsul asks me to make the wireframe simple, don't need to add any color first because that is for a usability test, not the final design yet.
On today class, Mr. Shamsul asks us to go to his class to have the usability test with our juniors. We find some student to help us to test our prototype and collect some feedback from them.
Week 9 ( 24/10/2018 )
Class canceled. Update progress online to Mr. Shamsul.
Week 9 ( 25/10/2018 )
On today class, Mr. Razif asks us to continue with our app prototype design as we need to present the final app design for him and Mr. Shamsul.
Week 10 ( 31/10/2018 )
On today class, Mr. Shamsul check on our progress of app design then gives us some comment to make it better. I showed my logo design to Mr. Shamsul, then he asks me to try to make the logo simple and easier to remember. He also told us to make a logo that was unisex.
Week 10 ( 1/11/2018 )
On today class, we have a presentation of our app design to Mr. Razif and Mr. Shamsul. We present our progress by showing our idea, target audience, process flowchart, user personal, survey, wireframe, usability test, app design idea and app design.
Week 11 ( 7/11/2018 , 8/11/2018 )
Midterm semester break, No classes.
Comments
Post a Comment