Social Media Feed
This UI offers clear visual hierarchy with easily recognizable icons and interactive elements that encourage user engagement. However, improvements could be made in text legibility and consistency of spacing to enhance readability and overall user experience.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
1
Color & Contrast3
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure0
Conversion & Actions0
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load1
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
13Moderate
2Minor
Small tap targets on post interaction buttons (like, comment, share)
Major
Accessibility & Input Ergonomics
The Problem
The like, comment, and share icons below the post image are relatively small and closely spaced, likely smaller than recommended 48x48 dp touch targets.
Why it Matters
Small tap targets increase the chance of mis-tapping or missing, which frustrates users and reduces ease of interaction.
How to Fix
Increase the size of these icons and their surrounding padding to ensure a minimum of 48x48 dp touch target area for each.
Issue Highlights
Low contrast on 'в' character in 'Показать ещё' text
Major
Color & Contrast
The Problem
The single character 'в' is displayed in a mid-gray color on a dark background, resulting in insufficient contrast likely below WCAG AA standards.
Why it Matters
Users with visual impairments or in low-light environments may struggle to read this character, reducing readability.
How to Fix
Increase the contrast by using a lighter color for this character or apply a consistent color style for all text elements in this line.
Issue Highlights
Close notification badge on chat icon reduces tap target size
Major
Accessibility & Input Ergonomics
The Problem
The red notification badge overlaps and reduces the effective tap target size of the chat icon in the bottom navigation bar, making it harder to tap precisely.
Why it Matters
Users may miss or incorrectly tap the chat icon due to the small active tap area, leading to frustration or missed notifications.
How to Fix
Increase spacing around the notification badge and chat icon or make the badge non-overlapping, ensuring the entire tap target area is at least 48x48 dp.
Issue Highlights
Subscription button lacking prominence and clarity
Major
Strategic Design
The Problem
The 'Subscribe' (Подписаться) button next to the content title is small, low contrast, and blends into the background, making it less noticeable as a critical interaction.
Why it Matters
Users may overlook the subscription option and miss opportunities to engage more deeply, resulting in decreased content subscription and retention.
How to Fix
Make the subscribe button more prominent through stronger contrast, larger size, or using a distinct accent color. Position it in a way that clearly associates with the content title.
Issue Highlights
Main article text likely too small to read comfortably
Moderate
Content Readability & Clarity
The Problem
The main body text under the Spider-Man image is densely packed and appears relatively small, which could challenge readability on small screens.
Why it Matters
Text that is too small decreases reading comfort and can discourage users from engaging with the content.
How to Fix
Increase font size slightly and adjust line spacing for better readability on mobile.
Issue Highlights
Lack of clear visual hierarchy in post engagement numbers
Moderate
Content Readability & Clarity
The Problem
The likes, comments, and share counts (249, 15, 17) are all shown with the same font size and weight, and are visually similar to the accompanying icons, leading to a flat text hierarchy.
Why it Matters
Users might find it harder to quickly scan and differentiate the important engagement metrics, reducing the efficiency of content consumption.
How to Fix
Increase font size or weight for key numbers or use color or spacing to create a stronger distinction between the counts and their icons.
Issue Highlights
Unlabeled icons in bottom navigation
Moderate
Visual Consistency, Imagery & Media
The Problem
The icons in the bottom navigation bar lack labels, making it unclear what each icon represents without tapping on them.
Why it Matters
Users may be confused about the purpose of each icon, increasing cognitive load and reducing ease of navigation.
How to Fix
Add text labels below each icon in the bottom navigation bar to clearly indicate their functions.
Issue Highlights
Dense horizontal scrolling navigation with tight spacing
Moderate
Navigation & Structure
The Problem
The top horizontal scroll for stories or categories contains many circular icons in close proximity with minimal padding between them, making it difficult to target and select a single item.
Why it Matters
Tight spacing and many items in a horizontal scroll increase the chance of mis-taps, leading to user frustration, especially on smaller mobile screens.
How to Fix
Increase horizontal padding between clickable icons and consider grouping or prioritizing content to reduce the number of immediate options shown.
Issue Highlights
Multiple small interaction icons under posts
Moderate
Efficiency & Cognitive Load
The Problem
Under the post, there are separate like, comment, and share icons which require distinct taps to perform related actions.
Why it Matters
Having multiple small icons for interactions scattered on elements increases user effort and micro-interactions, potentially slowing down engagement.
How to Fix
Combine or simplify interaction options, such as grouping comment and share into a single expandable menu or using swipe gestures for actions.
Issue Highlights
Unclear time reference for '2 д назад'
Moderate
Content Readability & Clarity
The Problem
The timestamp '2 д назад' (2 days ago) lacks timezone or date context, making it ambiguous as to when exactly the event or post occurred.
Why it Matters
Users need clear and unambiguous time information to understand the freshness or relevance of content.
How to Fix
Include date and timezone or link to detailed timestamp information on tap or hover.
Issue Highlights
Unlabeled + ambiguous icons at top right
Moderate
Visual Consistency, Imagery & Media
The Problem
The plus (+) icon and bell icon at the top right corner lack textual labels or tooltips, making their exact functions unclear.
Why it Matters
Users may hesitate to interact due to uncertainty, which can reduce engagement and increase cognitive load.
How to Fix
Add descriptive tooltips or labels to these icons to clearly indicate their purpose (e.g., add new, notifications).
Issue Highlights
Missing clear page or section title for current view
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The navigation header displays 'Главная' with an arrow, but it is unclear if this indicates the current page or a dropdown. There is no prominent, distinct title or breadcrumb indicating the user’s exact location or role context within the app.
Why it Matters
Users may feel lost or unsure of which section they are currently viewing, which can increase cognitive load and reduce effective navigation.
How to Fix
Add a clear and distinct page or section title that explicitly indicates the current view. Use active states or breadcrumbs if appropriate.
Issue Highlights
Three-dot menu button too close to Subscribe button
Moderate
Accessibility & Input Ergonomics
The Problem
The three-dot overflow menu button is positioned immediately adjacent to the 'Subscribe' button on the channel header, with minimal spacing.
Why it Matters
Closely spaced tap targets can cause users to accidentally tap the wrong button, increasing errors and frustration.
How to Fix
Increase spacing between the 'Subscribe' button and the three-dot menu button to at least 8-10 dp.
Issue Highlights
Large horizontal scroll list of profile circles
Moderate
Efficiency & Cognitive Load
The Problem
The row of circular profile icons at top consumes significant horizontal space and draws attention without immediate actionable context visible.
Why it Matters
Visual clutter from many colourful icons competing for attention increases cognitive load and distracts from primary content below.
How to Fix
Reduce the number of visible circles or simplify the treatment to reduce prominence and distraction.
Issue Highlights
Unread notification indicators without context
Moderate
Efficiency & Cognitive Load
The Problem
Red badges on bell and chat icons indicate unread items but do not show summary or type of notifications on this screen.
Why it Matters
Users must remember or guess the type and urgency of notifications, increasing memory load and potential missed actions.
How to Fix
Provide brief notification previews or category icons revealing context directly within or adjacent to these badges.
Issue Highlights
Unclear action for incomplete text expansion
Moderate
Flow & States Completeness
The Problem
The news text is truncated with 'Показать ещё' (Show more), but there is no clear interactive affordance indicating that the text can be expanded on tap or click.
Why it Matters
Users might be confused whether they can see the full news content or how to do so, limiting engagement with the post.
How to Fix
Make the 'Показать ещё' text a visually distinct button or link with a clickable affordance, or provide a UI hint such as an underline or icon to indicate tap-to-expand functionality.
Issue Highlights
Unclear primary focus above the fold
Moderate
Strategic Design
The Problem
The top of the screen shows a horizontal scroll of circles and a couple of icons, but it is not immediately clear what the core focus or primary action is for the user. The visual hierarchy lacks a distinct standout element or clear call to action.
Why it Matters
Users may be confused about what to do first or where the most important content is, reducing effective engagement with the app's core features.
How to Fix
Enhance the visual hierarchy by emphasizing the key feature or CTA above the fold, for example by increasing contrast, using larger text, or introducing a bold headline or prominent button.
Issue Highlights
Inconsistent vertical alignment in story icons
Minor
Visual Consistency, Imagery & Media
The Problem
The circular story icons at the top appear to have slight vertical misalignment relative to each other and their text labels beneath.
Why it Matters
Misalignment creates a visually inconsistent experience and can give an unprofessional impression.
How to Fix
Adjust the position of the story icons and their labels to ensure consistent vertical alignment and spacing.
Issue Highlights
Multiple navigation icons with similar visual emphasis
Minor
Efficiency & Cognitive Load
The Problem
The bottom navigation bar displays six icons of similar style and emphasis, requiring users to decide carefully where to tap for desired function.
Why it Matters
Too many evenly styled options compete for attention and require choice, increasing cognitive load at all times.
How to Fix
Limit the number of visible navigation icons or differentiate their visual hierarchy to guide user decisions better.
Issue Highlights