26 March 2018 - 30 March 2018 (Week 1)
After that, we were told to do a small exercise which is to create personal app using PhoneGap and Adobe Dreamweaver.
1. Splash Screen (loading screen/ logo)
2. Main Screen (Bio) - Don't squeeze too much info, make some popups if needed.
3. Art Gallery (with popups)
4. Contact Screen
Liam Yue Wei (0327686)
Usability and Mobile Application
Mobile Application Proposal
Lectures
Week 1
There are different kinds of apps:
1. Native App Development
- iOs, andriods, windows.
2. Web App
- mobile
- have to access browser
- responsive app
- will be very slow
- no installation
3. Hybrid
- ionic, PhoneGap, Sencha
- HTML and Javascript
- Don't need Internet
Designers and Front End Developer are different. Front End Developer are those who implement designs on the Web.
The Principle of Usability
1. Usability
2. Ease
3. Efficiency
4. Enjoyment
The Usability Attributes
1. Effectiveness = For users to achieve specified goals (functions such as mic).
2. Efficiency = User has learned the system, high level of productivity is possible
3. Flexibility = Responsive
4. Learnability = User can easily learn and rapidly use. (Don't need tutorials, as the users already know the icons, positions are common)
5. Memorability = User being able to return to the system after some period of not having used it.
6. Satisfication = Users are subjectively satisfied during use.
Usability testing is compulsory in mobile app development process. It needs to be done in 3 processes, which are before, during and after. However, these 3 processes are different process.
As for wireframes, there are low-fidelity wireframe and high-fidelity wireframe.
Low-Fidelity Wireframe = Outlines (like paper sketches/ computer drew images)
High-Fidelity Wireframe = Details (make the navigation innovative/ think of joining interfaces)
UX vs UI
UX = User Experience Design
UI = User Interface Design
UI is for the looks and feel, it is to make the websites or mobile app to look nicer. Whereas UX is about the features and functions, how you press the buttons. Without UX, UI can't be done. UX comes first, then only UI comes later.
Tuesday (03/04/2018)
During the class today, we have learned that in order to design mobile apps. We need to consider:
- Who are the users?
- What's happening?
- Where are the users?
The 'message' of a mobile app is crucial as it provides mental impression based on the visual design. We need to be clear of the objective of the mobile app. For instance, McDonald mobile app is more suitable with colorful design and fun images in order to create the happy atmosphere, and thus attracting more kids as well. However, there is an information mobile app such as Bus Service app, where people would usually focus more on the context than the design as it is a serious mobile app. Information apps can be designed to be fun as well depending on the design, but it cannot be overboard as it is still an app for serious purpose.
Elements of designing a mobile app:
1. Graphic Design
2. Highlight
3. Alignment
4. Space
5. Button text
6. Colors (Contrast between background and foreground)
7. Consistency
-No lecture was given-
Presentation Slides (Google Slides)
Week 5
-No lecture was given-
1. Native App Development
- iOs, andriods, windows.
2. Web App
- mobile
- have to access browser
- responsive app
- will be very slow
- no installation
3. Hybrid
- ionic, PhoneGap, Sencha
- HTML and Javascript
- Don't need Internet
Designers and Front End Developer are different. Front End Developer are those who implement designs on the Web.
Week 2
Monday (02/04/2018)
The definition of usability is ensuring the interactive products are easy to learn, effective to use, and enjoyable from the users' perspective.The Principle of Usability
1. Usability
2. Ease
3. Efficiency
4. Enjoyment
The Usability Attributes
1. Effectiveness = For users to achieve specified goals (functions such as mic).
2. Efficiency = User has learned the system, high level of productivity is possible
3. Flexibility = Responsive
4. Learnability = User can easily learn and rapidly use. (Don't need tutorials, as the users already know the icons, positions are common)
5. Memorability = User being able to return to the system after some period of not having used it.
6. Satisfication = Users are subjectively satisfied during use.
Usability testing is compulsory in mobile app development process. It needs to be done in 3 processes, which are before, during and after. However, these 3 processes are different process.
As for wireframes, there are low-fidelity wireframe and high-fidelity wireframe.
Low-Fidelity Wireframe = Outlines (like paper sketches/ computer drew images)
High-Fidelity Wireframe = Details (make the navigation innovative/ think of joining interfaces)
UX vs UI
UX = User Experience Design
UI = User Interface Design
UI is for the looks and feel, it is to make the websites or mobile app to look nicer. Whereas UX is about the features and functions, how you press the buttons. Without UX, UI can't be done. UX comes first, then only UI comes later.
Tuesday (03/04/2018)
During the class today, we have learned that in order to design mobile apps. We need to consider:
- Who are the users?
- What's happening?
- Where are the users?
The 'message' of a mobile app is crucial as it provides mental impression based on the visual design. We need to be clear of the objective of the mobile app. For instance, McDonald mobile app is more suitable with colorful design and fun images in order to create the happy atmosphere, and thus attracting more kids as well. However, there is an information mobile app such as Bus Service app, where people would usually focus more on the context than the design as it is a serious mobile app. Information apps can be designed to be fun as well depending on the design, but it cannot be overboard as it is still an app for serious purpose.
Elements of designing a mobile app:
1. Graphic Design
2. Highlight
3. Alignment
4. Space
5. Button text
6. Colors (Contrast between background and foreground)
7. Consistency
Week 3
-No lecture was given-
Week 4
During the class, we spent an hour to do a slide based on the topic given to us. I was grouped with Kamal and Hui Li. The topic given to us was 'Interviews and Focus Group', having finished the slides on Google Slides, we did a short presentation in the class.Presentation Slides (Google Slides)
Week 5
-No lecture was given-
Instruction
We were instructed to get Adobe Dreamweaver CC (latest one), Jquery Mobile, and PhoneGap.Tutorial
Week 1
During our class, our lecturer asked us to share one of the mobile applications that we used. There were many students sharing about mobile applications like Waze, Zalora, Adobe Capture and more. In my case, I talked about innisfree but to be honest, I rarely use it. The mobile application is to see whether the user is a VIP or not (membership), it shows how much money is spent in one year, and also the latest promotions/ products available in the shop.
During class today, we had a discussion with our own group on looking for examples of a good mobile app and a bad mobile app. During the discussion, we concluded that the example for good mobile app is Adobe Capture CC while the bad mobile app is Snapchat.
Adobe Capture CC (Good)
features
- Convenient.
- Tutorial available for new users.
- Efficient (A lot of features available).
- Easy to use.
- Fully compatible with Adobe CC apps and software.
design
Snapchat (Bad)
features
- Extra unnecessary steps
- Play stories that you didn't even subscribe to
- Stories and incoming 'snapchats' are on the same page
- Sending a snap is more confusing (old time users have to relearn how to use the app)
- Rewatching stories is more difficult
- The discover page has been bombarded with featured and sponsored content
- A lot of advertisement
- Chat records disappear after some period of time (user will forget what they were talking about)
design
- The design and layouts need to be improved on the discovery section, as it is messy and unpleasant for the users now.
- Though that being said, the main function of Snapchat is to take snap or to take video, and the placement of functions are similar to camera app. Therefore, users do not have to learn how to use this app to take snap or video.
We did a class activity during tutorial which involves Information Architecture on Air Asia boarding pass.
- Identify problem ( design layout)
- Without removing any information
- Design your own boarding pass
- Re-organize in terms of importance
- Target Audience
- View yourself in the scenario of the audience
- What will make it easy for you
- Critical
- What info do you access the most
Week 2
Tuesday (03/04/2018)During class today, we had a discussion with our own group on looking for examples of a good mobile app and a bad mobile app. During the discussion, we concluded that the example for good mobile app is Adobe Capture CC while the bad mobile app is Snapchat.
Adobe Capture CC (Good)
features
- Convenient.
- Tutorial available for new users.
- Efficient (A lot of features available).
- Easy to use.
- Fully compatible with Adobe CC apps and software.
design
Snapchat (Bad)
features
- Extra unnecessary steps
- Play stories that you didn't even subscribe to
- Stories and incoming 'snapchats' are on the same page
- Sending a snap is more confusing (old time users have to relearn how to use the app)
- Rewatching stories is more difficult
- The discover page has been bombarded with featured and sponsored content
- A lot of advertisement
- Chat records disappear after some period of time (user will forget what they were talking about)
design
- The design and layouts need to be improved on the discovery section, as it is messy and unpleasant for the users now.
- Though that being said, the main function of Snapchat is to take snap or to take video, and the placement of functions are similar to camera app. Therefore, users do not have to learn how to use this app to take snap or video.
Week 3
Tuesday (10/04/2018)We did a class activity during tutorial which involves Information Architecture on Air Asia boarding pass.
- Identify problem ( design layout)
- Without removing any information
- Design your own boarding pass
- Re-organize in terms of importance
- Target Audience
- View yourself in the scenario of the audience
- What will make it easy for you
- Critical
- What info do you access the most
 |
| Before |
 |
| After |
I designed the one above with Hui Li. We decided to design the boarding pass (home-print A4) in this way as we prefer the design layout to be simple and neat, so that it doesn't confuse the audience. We chose the font called 'Titilinium Web' as the font is not fancy, but it's not too plain as well. The font too is not too separated yet not too compressed. The lower part with red background is meant to be torn off and to be kept by the airport, while the white background is for us to keep.
We downloaded Adobe PhoneGap on both our laptop and handphone in the class. Apparently we need to use Adobe Dreamweaver too to create a mobile app. First, we need to launch Adobe PhoneGap.
1. Open Project (New) > Blank > Folder/Name
2. com.companyname.appname (Can put our own name in the company name too)
3. Adobe Dreamweaver > New Site > Put the file into same location as Phone Gap folder is.
4. When launched Adobe Dreamweaver, double-click on index. html under www.
5. Insert > jQuery Mobile
6. double-click 'page' > local (OK) > ID: page-1 (note: we call 'page' for website and 'screen' for mobile)
Coding
1. <div data-role="page" id="page 1"> to create new page.
2. <div data-role="footer" data position = "fixed">
3. <div data-role="page" id="page 2">(/div)
4. Click on 'content' > Insert > Button (OK) to get
<a href = "#" data-role = "button"> Button </a>
5. Add the ID name into the "#". EG: "#page-2".
6. Add in data-transition "slide"> to make add transition when change pages.
Note: The 'data' is jQuery Javascript.
Week 4
Tuesday (17/04/2018)We downloaded Adobe PhoneGap on both our laptop and handphone in the class. Apparently we need to use Adobe Dreamweaver too to create a mobile app. First, we need to launch Adobe PhoneGap.
1. Open Project (New) > Blank > Folder/Name
2. com.companyname.appname (Can put our own name in the company name too)
3. Adobe Dreamweaver > New Site > Put the file into same location as Phone Gap folder is.
4. When launched Adobe Dreamweaver, double-click on index. html under www.
5. Insert > jQuery Mobile
6. double-click 'page' > local (OK) > ID: page-1 (note: we call 'page' for website and 'screen' for mobile)
Coding
1. <div data-role="page" id="page 1"> to create new page.
2. <div data-role="footer" data position = "fixed">
3. <div data-role="page" id="page 2">(/div)
4. Click on 'content' > Insert > Button (OK) to get
<a href = "#" data-role = "button"> Button </a>
5. Add the ID name into the "#". EG: "#page-2".
6. Add in data-transition "slide"> to make add transition when change pages.
Note: The 'data' is jQuery Javascript.
Week 5
We just slightly fixed the location of the files by dragging the 'jquery-mobile' folder into the 'www' folder. Then, we changed the content of the html by removing all the '../'. Also, go to Insert > Page > Key in 'popup1', and go to the page 2 section in html and change <a href="#page"...... data-transition="slide">Button</a> to <a href="#popup1" ........data-rel="dialog">Button</a>After that, we were told to do a small exercise which is to create personal app using PhoneGap and Adobe Dreamweaver.
1. Splash Screen (loading screen/ logo)
2. Main Screen (Bio) - Don't squeeze too much info, make some popups if needed.
3. Art Gallery (with popups)
4. Contact Screen
Feedback
-No feedback was given-
Week 3
1. Add advertisement ( it's a way for Air Asia to earn more money)
2. The bottom section > red and black is hard to read, can add blocks/ boxes behind the text to improve readability.
3. Can play around with the font and color, go search 'New Boarding Pass' for more inspirations.
4. There are 2 bar codes on each side, one long one short, do not separate them.
5. Terms and conditions is compulsory.
6. Mr.Razif liked the space in between, and also the separation for the white background and the red background (the one we keep and the one the airport keeps)
Week 3
1. Add advertisement ( it's a way for Air Asia to earn more money)
2. The bottom section > red and black is hard to read, can add blocks/ boxes behind the text to improve readability.
3. Can play around with the font and color, go search 'New Boarding Pass' for more inspirations.
4. There are 2 bar codes on each side, one long one short, do not separate them.
5. Terms and conditions is compulsory.
6. Mr.Razif liked the space in between, and also the separation for the white background and the red background (the one we keep and the one the airport keeps)
Comments
Post a Comment