Application Design 2 / Task 1
29.8.2022 - 19.9.2022 (Week 1 - 4)
Lew Se Win / 0347637 / Bachelor of Design (Hons) in Creative Media
Application Design 2
Task 1: App Design 1 Self-Evaluation and Reflection
LECTURES
Week 1
Mr. Razif gave us a brief for this module. Besides, he asked everyone to introduce themselves, while at the same time getting to know everyone in the class. After that, Mr. Razif asked some of the students to show their work in the app design 1 module and he gave us some feedback.
Week 2
Mr. Razif gave us a lecture about web app development. There are 5 types of web app development which include native, web, hybrid native, progressive web app and hybrid web.
Native
- Fastest
- Best access to device functionality
Web
- Poor mobile experience
- Lack of access to device functionality
- Not discovered from App Stores
Hybrid Native
- Fast runtime
- Access to device functionality
- Looks & feels native
- Bigger learning curve
Progressive Web App
- Discoverable by App stores/web
- Poor install experience on iOS
- Looks & feels close to Native (mainly: HTML, CSS, Javascript)
Hybrid Web
- Similar to progress web app
- Slower runtime
- Developed with web tech
- Access to device functionality
Porting- convert one platform to another (iOS to android)
User-Centered Design
User-Centered Design
- Daily interactions with our environment
- How does it made you feel?
- Well-designed product/service
- How we perceive the summary of our interactions
- Switching perspective (focus on users)
- Build a solution
Week 3
Mr. Razif teach us about user testing in this week.
How to decide the sequence in app?
- User Testing
- A/B Testing
- Information architecture
He said that he will teach us DOM and GSAP for our upcoming projects.
DOM - Javascript (dynamic content/layout)
GSAP - Javascript (motion/ animation)
App Design 1 Self-Evaluation and Reflection
Figure 1.0 Grocey App
I was picked by Mr. Razif to present my app in the first class. My app is a grocery comparison app, which is called Grocey. An app that compares grocery prices that are near the user and allows users to conveniently manage their expenses on grocery shopping.
Feedback:
Mr. Razif said that my app design is very boxy and I should remove the items from the promo section if the product is sold out, instead of greying them out. Besides, the greyed out part should be more greyish because, for now, it is still sharp. Hence, the opacity can still be reduced. I also should have a short one-sentence to introduce my app.
Figure 1.0 Grocey homepage screenshot
Self-Evaluation:
Firstly, I think that the visual in my app could be improved. For example, implementation of gradient colors could be considered and the illustration could be improved by having a consistent style.
Figure 1.1 Previous buttons
Besides, the buttons in the app could also be improved by having a more 2.5D view to attract the users for actions instead of a plain and boring color button.
Figure 1.2 Page title
The title of each page are would also be improved as the position and size of it is being awkward.
Figure 1.3 Proof Image
The title of Proof sounds unfamiliar as a title. Hence, I think I should change the title to image and explain it with a description for users to understand that it is for verification purpose.
Figure 1.4 Shopping Summary
As for the summary pages, I realised that the alignment of text is not aligned. I think that the quantity should align to the left with the name of the grocery items.
Week 2
This week, we have analyse our app using UX design principles.
References:
Psychology of shapes
Most of the shapes found in my app are rectangle with rounded edges. However, I also implemented square with rounded edges for the grocery categories.
Psychology of colours
People always relate the colour green to nature, such as grass, trees, and forests. With this, the colour green could also be related to the nature that can find food. Hence, I chose green as the main colour of my app. Besides, the secondary colour chosen for my app is orange because it has a contrast with green, while at the same time it could be energetic and attract attention. Hence, I used orange for titles and important information, such as "promo items" and some of the buttons.
Gestalt principles
Law of Common Region
This law claims that items within a boundary are perceived as a group and assumed to share some common characteristic or functionality. With this, in my app UI design, I have different boxes and boarder to group my items together.
Figure 2.0 Grocery Category (Law of Common Region)
Figure 2.1 Grocery (Law of Common Region)
Figure 2.2 Expenses categories (Law of Common Region)
Law of Proximity
This law claims that things closer to each other appear more related than things farther apart. This law is present in my app as I group the categories close together and have the same gap, while another group of information will have a gap that is further away to be differentiated.
Figure 2.3 Different groupings (Law of proximity)
Law of Continuity
The dotted line is used to connect the status of the pickup feature.
Figure 2.4 Pickup status (Law of Continuity)
Fitt's Law
This law claims that the amount of time required for a person to move a pointer to a target area is a function of the distance to the target divided by the size of the target. In the UI design, I implemented this law by having a larger button to act as a call to action. This is because users could reach the button easily if the button's size was larger, which would have increased the area of interaction.
Figure 2.5 Buttons (Fitt's Law)
Law of Prägnanz
This law claims that when you're presented with a set of ambiguous or complex objects, your brain will make them appear as simple as possible. With that, the icons used in my app are simple.
Figure 2.6 Icons (Law of Prägnanz)
FEEDBACK
Week 3
Mr. Razif suggested that my sign in buttons could have more edgy corners. Besides, Mr. Razif said that the text for my app is too small. He also suggested that it is better to show the price comparison on the first page of search results as well as highlight the cheapest option for the grocery. Next, the spacing in the grocery list should be increased, and I do not need to develop the expenses, favourite pages, comment sections, and edit the price sections. I could make the items clickable but go to the same result, so that it could reduce my workload.
Comments
Post a Comment