UX optimization
Design internship projects @Xiaohongshu
Participated in: Competitive research + Brainstorming + Architecture + Prototyping + Iteration
New function of zooming pictures in notes
Apr-Jul, 2023
inspire lives
about xiaohongshu
Notes
Key scenario
With a mission to “inspire lives”, Xiaohongshu is a lifestyle platform that inspires people to discover and connect with a range of diverse lifestyles. Established in 2013, Xiaohongshu has over 450 million registered users as of 2021.
Millions of users showcase their experiences on the platform daily, from cosmetics and beauty to fashion, food, travel, entertainment, fitness, and childcare, brought to life visually through a variety of formats including photos, text, videos and livestreaming.
The innovative platform integrates the authentic content shared by its community with commerce, quickly becoming one of the most popular destinations for making lifestyle decisions.
A fundamental feature of Xiaohongshu since day 1, Notes are the essence of any Xiaohongshu journey. Users share their experiences through Notes and the community interacts through functions including “like”, “collect” and “comment”.
We has collected a lot of user feedback that it's inconvenient to not have the ability to zoom to full screen for images in graphic notes scenarios.
When encountering a picture with text/long picture/picture information blocked by other components, etc. If the user needs to view the details of the picture, it will bring a bad experience.
background
Can Xiaohongshu come out with a function of clicking to enlarge the picture?
Suggestion for Xiaohongshu: Users can view pictures in full screen, especially horizontal pictures.
When will Xiaohongshu be able to enlarge pictures?
I hope the picture can be full-screen
I want to click to make the picture full-screen display, and the horizontal picture automatically rotate 90 degrees.
Competitive Research
Full screen page:
Top left to right: page number markers, bloggers, more
Bottom left to right: Immersion button, Engage
Click blogger to go to personal page
Click More to share half level
Click Retweet to go to retweet edit page.
Tap Comment to jump to the comment section of the individual tweet detail page
Tap into Like to like this image only
Click or long press on a small image to enter full screen, then click to exit full screen
-Double-finger zoom in, picture zoom out, zoom in has an upper limit; double-finger pinch, picture zoom out, zoom out has a lower limit, will automatically pop back to the default size
-Once the user starts to zoom in or out, it automatically enters the immersive mode, need to manually return to the non-immersive state
-Double-tap can also zoom in, the focus is the double-tap contact point
-Phone horizontal screen, photos can not be horizontal screen
-Long press to evoke forwarding half level
When Post has only one image, click to go to full screen.
When Post has multiple images, click to enter the vertical preview scene, and then click again to enter full screen
In full-screen mode, click to enter the immersive state.
-Double-finger zoom in to zoom out, an upper limit for zoom in; double-finger pinch to zoom out, a lower limit for zoom out, and it will automatically pop back to the default size.
-Automatically enters the immersion mode. When shrinking back to the default size, the immersion mode is canceled.
-Long press to evoke sharing half layer
Click on an image to go to full screen, then click again to exit full screen
Full screen page is clean, only the bottom of the page number markers
-Double-finger zoom in, has an upper limit; double-finger zoom out, has a lower limit, will automatically pop back to the default size
-Double-tap can also zoom in and out, the focus is double-tap contacts
-Pictures displayed horizontally with the phone
-Long press to evoke forwarding half layer
Basic Interaction Steps
What to engage?
Publishing now limits the size based on the first image of the note, while cropping the later images. Are we following the publish after cropping?
Some To be determined
Tap to enter full screen, slide left and right to switch photos; tap again to exit full screen
Pinch to zoom in and out, once start to zoom in, enter the immersive state; zoom back to the default size and exit the immersive state.
Double-tap to zoom in
Synchronize photos with the phone's landscape screen
Long press to evoke half layer
NNS
Photo Search
User ID
...
#1
#2
press and hold
tab X
pinch to zoom in
Image size 100% to 110%
Black mask opacity 0% to 100%
Raise the interactive half layer
110 % < picture ≤ 400 %
400 % < picture
Bounced back to 400%
Picture stops when finger left
Back to initial state
Tab the picture
double-tap
image 100% , 3:4
image 100% , not 3:4
Zoom in to 200%
Zoom in proportionally to the full height of the screen
Zoom in centered on the contact point
drag
left-right switching
Vertically
Horizontally
-After cutting to the center line, if releasing the
finger, it will automatically jump to the next photo
Continue to switch photos after zoomed in
-Page number switching after two pictures
cross the center line of the screen
-16px between two images
If the picture is the first or the last one
-Bounces back after dragging
-Edge aligned with the edges of the screen
image edge < 40px from the screen edge
image edge ≥ 40px from the screen edge
-Picture bounces back
-Edges align with the screen edge
-Follow the finger and change proportion
-Picture minimum 100%
-Back to note
pinch to zoom in
-Black mask opacity from 0% to 20%
picture ≤ 110 %
picture ≤ 110 %
in the drag direction
edge exceeds the screen
image edge < 40px from the screen edge
image edge ≥ 40px from the screen edge
110 % < picture ≤ 400 %
110 % < picture
400 % < picture
-Image scale from 100% to 110%,
black mask opacity from 20% to 100%
Back to initial state
Back to initial state
Back to initial state
-Picture minimum 100%
-Black mask opacity changes (minimum 20%)
-Picture minimum 100%
-Black mask opacity changes (minimum 20%)
Black mask opacity remains unchanged
Picture moves
-Picture bounces back
-Edges align with the screen edge
Bounced back to 400%
Picture continues to enlarge (max 800% )
fingers off the screen
fingers off the screen
Click
pinch to zoom out
Drag
When finger off the screen
Continue zoom in
structure
Add engage component
mask standard
Mask under the image
Transparency changes during zoom-in
mask under the engage component
mask under the engage component
Pictures of different sizes
mask standard
normal image
Full screen image
e.g. wallpaper
long image
e.g. comics
engage
mask standard
1034
1017
84
3D&平面-Frankie
柴犬Oka
Heidi
文嘟嘟
Cherlylee
小妩媚皮皮
生成分享图
复制链接
不感兴趣
举报
私信好友
微信好友
朋友圈
QQ好友
QQ空间
微博
分享至
share
save
like/favorite
1034
1017
84
保存成功
分享
1034
1017
84
mask standard
already have comments
no comment yet
Click on comments to exit viewer
Page slides down to the comments section
Page slides down to the comments section and the input panel pops up
Click on comments to exit viewer
Takeaways
New features need to be proposed based on a combination of user feedback, design costs and potential benefits. Experimentally implement it with some users and collect feedback data.
When designing, we need to consider every detail and list all the scenarios to be adapted. The design should also take into account the needs of dual-end design to improve the efficiency of the team.
The design should maintain the consistency of the product, and the application of component libraries should be in line with the specifications. Label the name and logic of each part clearly so that the development department can understand.