25/4/2024 - 19/5/2023 (Week1 - Week4)
Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Task 1 - Self Reflection and Evaluation
INSTRUCTIONS
Our lecturer assigned us to reflect on and evaluate our previous Application Design I projects to improve our app designs. I chose to design a new app instead of refining my previous AP1 project because I wanted to explore a fresh design approach. Before move into design I prepared a proposal about the new app.
App Design Proposal
Design Moodboard
App Design Sketches
Artspark UI Design Analysis
1. Loading & Sign Up UI Design
Upon starting the app, an animation featuring the app's logo and name will be displayed.
Following the loading screen, the app will automatically transition to the signup page, which includes a welcome message and a brief description of the app. The signup page features a designated area for users to enter their name, helping us address them appropriately.
Self reflection
- Clean and minimalist overall design for easy navigation.
- Welcome message and brief description reinforce the app's value proposition.
- High contrast name input field and sign-up button for clear user actions.
AI evaluation
What's good:
- Welcoming Message: The welcome text is inviting and explains the purpose of the app, which can help users understand what they can expect.
- Focus on Essentials: The sign-up page asks for minimal information initially, which reduces friction for new users.
What Could Be Improved:
- Contrast and Readability: While the dark theme looks sleek, the text inside the input field and the label could be more readable. The contrast between the text and background should be increased for better readability.
- Visual Hierarchy: The sign-up button is quite prominent due to its color, which is good. However, the input field might benefit from a bit more emphasis to draw the user’s eye to where they need to take action first.
Argument
I disagree with the visual hierarchy feedback. The input field already has a neon border, which effectively highlights it and provides clear instructions for signing up.
Hick's Law
- Presenting only the essential elements (input field and sign-up button) minimizes cognitive load, making it easy for users to understand and complete the action.
Jakob's Law
- Users spend most of their time on other apps, so they expect your app to work similarly. Using common design patterns like loading indicators and readable text helps meet these expectations.
Affordance
- The green "Sign up" button clearly communicates its purpose and invites the user to take action.
2. Onboarding UI Design
The onboarding process is divided into three pages, each showcasing a main feature of the app exploration feed, marketplace and community club. Highlighting these features helps boost user engagement and retention.
Self reflection
- Maintain consistent design across all onboarding screens.
- Incorporate visual animations to enhance the overall experience.
- Use a progression bar to indicate the user's current position in the process.
AI evaluation
What's good:
- Clear and concise headings: The headings "Explore your feed," "Marketplace," and "Community club" effectively communicate the purpose of each section, adhering to the principle of discoverability.
- Progress indicators: The red line at the top serves as a progress indicator, helping users understand their position within the onboarding flow, aligning with the principle of user control and freedom.
- Visual hierarchy: The use of larger font sizes for headings and smaller sizes for subtext establishes a clear visual hierarchy, making it easier for users to prioritize and consume the information.
What Could Be Improved:
- Onboarding flow: While the progress indicator is helpful, it might be worth considering incorporating additional visual cues or animations to guide users through the onboarding process more seamlessly, enhancing the overall user experience.
Fitts's Law
- The large and clearly visible "Next" and "Back" buttons are easily targetable, reducing the effort required for user interactions.
Doherty Threshold
- Add interactive previews or animations to show key actions make user feel more interaction and have better understanding.
Aesthetic-Usability Effect
- Maintain a consistent visual style across all onboarding screens, as aesthetically pleasing designs are often perceived as easier to use by users.
3. Home (Feed explore) UI Design
The main page allows users to explore a feed featuring artists' artwork and design trends. Users can switch between "Following" and "For You" to keep up with their favorite designers and art styles.
Self reflection
- Bottom menu designed for user easily to navigate through
- The glassy effect make the overall design look modern and aesthetic and align with the overall visually appealing style.
AI evaluation
What's good:
- Visual Appeal: The feed features vibrant, high-quality images which can engage users and encourage them to explore more.
- Personalized Feed: The "Following" and "For You" tabs allow users to personalize their feed, catering to their interests and preferences, aligning with the principle of user control and freedom.
- User Interaction Icons: The presence of like, follow, and comment icons makes it easy for users to interact with the content.
What Could Be Improved:
- Spacing and Alignment: Maintain consistent spacing and alignment to enhance readability and visual harmony. For example, ensure equal padding around images and between different UI elements.
Argument
I disagree with the feedback on spacing and alignment. The current design provides sufficient spacing and alignment without being overly packed. Adding more spacing would create excessive negative space, which could make the user feel lost and unsure of what to do.
Gestalt Principles
- Using proximity and similarity to group user profiles, artwork images, and interactions (like, comment, share) creates a cohesive and organized layout.
Von Restorff Effect
- The "Follow +" button stands out with its bright yellow color, effectively drawing users' attention and encouraging them to take action and follow artists they enjoy.
4. Sidebar UI Design
The sidebar design allows users to navigate to sections not included in the bottom menu, such as Wallet, Collections, History, and Settings.
Self reflection
- The gradient background of the sidebar is designed to create a layered effect, enhancing the depth and feel of the home page.
- Use high-contrast colors to separate the user settings category from other sections, making it easier for users to understand.
AI evaluation
What's good:
- Visual Hierarchy: The use of different colors (e.g., red for "GK's" and "Others") helps to create a visual hierarchy, distinguishing between different sections.
- Clear Labeling: The sidebar items are clearly labeled, making it easy for users to understand the different sections.
- Dark Theme Toggle: The dark theme toggle is prominently placed, allowing users to easily switch themes.
What Could Be Improved:
- Close Button Placement: The close button is quite prominent, but its bright color might draw unnecessary attention. It could be more subtly integrated.
- Visual Hierarchy Enhancement: While the hierarchy is clear, the use of consistent typography and strategic use of color or iconography could further reinforce the importance and distinction of each section.
Argument
I disagree with the feedback on visual hierarchy. The design features consistent typography and high-contrast titles to differentiate categories effectively. However, I agree that adding icons is a good suggestion, as it can help users understand the content more quickly through visual cues.
Proximity and Similarity
- The use of spacing and subtle dividers leverages the principles of proximity and similarity, helping users perceive and group related items together.
Fitts's Law
- The placement of interactive elements like the toggle and "Close" button in prominent and easily targetable areas facilitates efficient user interactions.
5. Feed information UI Design
This page allows users to explore detailed information about the feed's artwork and designs, enabling them to learn more about each piece.
Self reflection
- The ambient background color is carefully designed to surround the images, making the visuals more appealing and enhancing the overall aesthetic.
- Displaying whether a post is for sale and providing a direct button to view it in the marketplace can make it easier for users to navigate and find items of interest.
AI evaluation
What's good:
- Visual Appeal: The designs are visually striking with vibrant colors and high-quality images, capturing users' attention. The use of different background colors (blue for "Space" and red for "Garyotk") provides a dynamic and engaging visual experience.
- Call to Action (CTA): Prominent "Follow" and "Following" buttons with high visibility due to the contrasting color (neon green). Clear "See in marketplace" button, indicating availability for sale.
What Could Be Improved:
- Information Density: The "About" section is truncated with "…more". It may not be clear that users can expand this section for more information.
- Affordance: The "See in marketplace" button might be confusing for posts that are not for sale. Consider changing the label or disabling it to avoid misleading users.
Argument
I agree with both improvement suggestions. The information density needs varying contrast to help users recognize actions more easily. Additionally, the affordance of the button naming should be revised to avoid confusing the user experience.
Hick's Law
- Simplify choices to reduce cognitive load. By reducing the amount of information displayed at a time, users can process and make decisions faster.
Fitts's Law
- Ensure that interactive elements (buttons) are large enough and positioned for easy access. The "Follow" buttons and action icons are well-sized and placed.
6. Marketplace UI Design
The Marketplace page allows users to explore artwork and designs that are for sale. Users can make offers on items or upload their own work for sale.
Self reflection
- Clear display of essential information like item name, price, and price history graph.
- Logical flow from product listing to detailed view to cart/checkout process.
AI evaluation
What's good:
- Hierarchy and Focus: Key information like the price (128 ETH) and call-to-action buttons (Add to cart, Make Offer) are prominently displayed. The item's details are clearly delineated, making it easy for users to understand the value and history of the item.
- Interaction Elements: Buttons are clearly differentiable and large enough to be easily tapped. The "Following" button is well-integrated into the design, adding a layer of social engagement.
What Could Be Improved:
- User Guidance: The "Connect Wallet" screen might be confusing for first-time users who are not familiar with cryptocurrency wallets.
- User clarity: Adding context or tooltips to the price history graph could improve understanding.
Argument
I agree with the suggestion to improve user guidance to ensure clear information for first-time users. However, I disagree with adding more context to the price history graph for better clarity. I believe the current time price history provides sufficient information, and adding more context might overwhelm the user.
Aesthetic-Usability Effect
- The visually appealing design can make users more tolerant of minor usability issues, enhancing overall user satisfaction.
Miller's Law
- Information is chunked effectively. For instance, price history and transaction options are grouped together, reducing cognitive load and making the interface easier to digest.
7. Community UI Design
Users can subscribe to the community club to explore the club feed and chat with members for sharing and discussion.
Self reflection
- The design is clear and user-friendly, making it easy for users to explore both the community feed and chat section.
- The user's joined clubs are conveniently displayed at the top of the page, enabling easy switching between different community clubs.
AI evaluation
What's good:
- Visual Hierarchy: The interface effectively uses visual hierarchy to guide the user's attention, starting from the "Joined Clubs" section to the feed content. The "Feed" and "Chat" buttons are prominently placed, making it easy for users to switch between views.
- Interactive Elements: Interactive elements such as the heart (like), comment, and bookmark icons are clearly distinguishable and accessible, encouraging user interaction.
What Could Be Improved:
- Button States and Feedback: The "Chat" button appears grayed out and inactive, which might confuse users.
- Context and Clarity: There is no clear indication of what "Joined Clubs" entails or how users can join new clubs.
Argument
I agree with both suggestions: improving the chat button status to avoid confusing users between active and inactive states, and adding a "Join New Club" button to help users search for and join clubs.
Law of Proximity
- The "Joined Clubs" icons are visually grouped together, leveraging the Law of Proximity to indicate they are related elements.
Hick's Law
- Having only two main navigation options (Feed and Chat) helps reduce decision paralysis from too many choices, following Hick's Law.
8. Profile UI Design
Allows users to edit their profile picture and name. Displays the number of people the user is following, their followers, and the number of likes they have received, fostering social interaction and engagement. Features a grid of the user’s posts or creations, enabling them to showcase their work or interests.
Self reflection
- Grid-style layout showcases the user's creative work and interests effectively.
- Clear visual hierarchy with the user's avatar, name, and role prominently displayed.
AI evaluation
What's good:
- Clear Hierarchy: The profile picture and user information are prominently displayed at the top, ensuring that the user's identity is immediately recognizable.
- Consistent Design: The design elements, such as the buttons and icons, are consistent throughout, providing a cohesive look and feel.
What Could Be Improved:
- Content Differentiation: The grid of posts could include more information, such as titles or brief descriptions, to give users more context about the content.
- Metrics Readability: The social metrics (Following, Followers, Likes) could be made more distinguishable by increasing the font size or using different colors.
Argument
I agree with the content differentiation by having the title on preview state to help users understand what they are looking at. However, I disagree with increasing the font size and color contrast for the social metrics. The current design is already clear enough, and making the metrics too high contrast would distract from the content being posted.
Gestalt Principles
- The grid layout groups related creative work together through the principles of proximity and similarity from Gestalt psychology.
Law of Prägnanz
- The simple shapes, monochromatic color scheme, and grid layout leverage the law of prägnanz by creating a sense of cohesive simplicity and order.
Figma Prototype
Presentation Slide
Video Presentation
Feedback
Week 3
- The app proposal contains sufficient information to proceed.
- Consider experimenting with different UI styles for better variety.
- Reduce the number of UI pages and focus on those where animations can be effectively applied.
Comments
Post a Comment