Can't decide which variant of profile layout to implement

Feedback & Problem Solving
#1

I am building a web application for a closed community of homeschoolers. The tool should help parents find friends for their homeschooling children in the close neighborhood.

So, I have the Edit My Profile page. Now I’m stuck with the View Profile mode representation, specifically with the Children section. I have 3 variants, each has cons & pros.

profile%20view
profile%20view1822×1981 165 KB

Full-screen images (I’ve translated only relevant text to English)

The profile will be displayed as a card in a list of other profiles during the search.
Llike this:

biglist

Variant 1 emphasizes children’s interests, they pop into eyes immediately.
Variant 2 makes info scanning more smooth.
Variant 3 makes profile card more compact.

Important:

  • The list may contain 20+ such profile cards. So, my homeschooling parents need to easily scan a large amount of information.
  • They want to easily spot like-minded profiles according to the children ages and interests (no filter by age or interest, there are reasons for this).
  • Homeschooling parents usually perform several tasks simultaneously and with many distractions.

What layout to choose? I need another set of eyes on the problem.

Do I need to set up a separate user test for all variants and measure how quickly users find relevant information? I have only about 10 users for testing, which is not enough for such a thing, I suppose. The problem seems to be not audience specific and I hope someone could advise me from their experience.

2 Likes
#2

My preference is variant 1, purely for readability.

3 works with a couple of items per child but if there were lots it wouldn’t be easy to read.

1 Like
#3

Thank you. According to my survey, there will be 2-6 items per child.

@HAWK do you think, my question is too specific, and the community members are not interested in diving into it? It seems to me that broad and general questions provoke the most active discussion.

#4

For a long list of cards I would definately make it as short as possible.

“@HAWK do you think, my question is too specific, and the community members are not interested in diving into it? It seems to me that broad and general questions provoke the most active discussion.”

Specific questions are interesting but broad questions are probably more likely to be something that more people can contribute to.

1 Like
#5

That’s a good point, but there’s something else that may be at play here. Around the holidays, participation around here cools down. Maybe you’ll get more feedback after the holidays if you’ll bump this up then.

1 Like
#6

Ah, true! I forgot that Christmas is coming :grinning: In my country we have Christmas in January.

2 Likes
#7

Hmm… why? Because of scrolling and users losing attention? But according to NNG people don’t mind long scrolling if the content is relevant and valuable. I rarely read social network feeds, but if I do I occasionally find myself meditatively scrolling for half an hour :grin:

I believe you are right! Although I adore digging into tiny details.

#8

Long scrolling is great when the user is engaged in the content such as in an article or list of products but only a certain percentage of the profiles will be relevant to them and so a lot of the content they are looking at will be irrelevant. It would be annoying to have to do multiple swipes for each profile you’re not interested in.

2 Likes
#9

@rachelreveley
I see. Thank you for pointing this out!

Had to think a while about this and still hesitating though. Child’s age and interests are key to deciding whether the profile is relevant. #1 suggests smooth vertical scanning while #3 makes the user’s gaze stumble.

profile%20view
profile%20view1292×1173 129 KB

So, I assume, that maybe #1 would be easier and faster to scroll despite having longer cards?

1 Like
#10

I agree with that. If you build it well, users will scroll. I came across some good information on this website.

Some information I found there:

  • Data analytics provider Cheatbeat analysed over 2 billion website visits and found 66% of attention on a typical web page is “below the fold” – people scroll to get there.

  • Eye tracking studies by usability guru Jakob Nielson found people tend to focus above the fold, but people still do scroll, especially when the page follows certain conventions that facilitate it.

  • On a mobile site, around half of all users start to scroll within 10 seconds, and 90% within 14 seconds.

  • A study from the Software Usability Research Laboratory shows that users read long, scrolling pages faster than segmented or paginated ones.

  • Assuming designers follow scrolling design practices, people will scroll, according to an eye-tracking study by CX Partners.

I hope you can use this information :slight_smile:

#11

Have you had a look at the Peanut App? It sounds like they’ve tackled the same problems as you. What’s nice about it is that rather than scrolling, you swipe, so the info is always in the same place though it does limit the space available.

#12

Thank you for sharing, this is very valuable! Will dive into scrolling best practices to ensure users stay engaged!

1 Like
#13

Thank you so much, I had no idea about this app, as it is not available in my country! I could explore it through the description and images though, and it was very helpful.

I did try the swipe to ignore pattern and showed the first simple prototype to my homeschooling friends. However, they all agreed that they felt like choosing a match in a dating app. So I decided to stick with scrolling. Anyway, I will definitely explore the way they organize information, it’s very informative!

1 Like
#14

short version:
Version 1, for scanability.

thoughts on version 1:

  1. native scroll bars are a helpful indicator, letting people know where they are in a document. i wonder if it’s worth considering an ‘in-app’ indicator that mimics the scrollbar to that end. it seems like all kinds of things associated with scrolling are especially important here, especially as version 1 makes a longer card. it would be similar to having a progress indicator on multiple form pages.

  2. sort of lending to (1) above, depending on how long each card gets, it could be useful to have have some visual reference of when you’ve “left” the card above and entered the next card below. after scrolling for awhile, sometimes quickly, it could be a little disorienting. you ever get lost in instagram or fb before? :smiley: . when i thought of this, the first thing that came to as mind as additional dimensions were contrast or color- then i thought giving cards a ‘sticky’ header that gets pushed out of view by the next sticky header of the next card.

  3. the boxes in version 1 look sort of like ‘tags’. if there is a finite set of tags, then it seems possible to associate a specific tag with a color. that could lend itself to scanability, but it could be over powering.

–

unrelated. I almost went to shatsk oblast to visit some of our remote team a couple years ago. long story why i couldn’t go.

1 Like
#15

Absolutely agree! I was thinking about smth like

a scrollbar and colored captions or other elements.

They do it intentionally, I am sure :thinking:

I’ll think about it, thank you!

I was considering the idea of color tags but I set it aside because there can be many tags indeed. Also, the tags idea seems doubtful to me now - users are accustomed to the pattern of clicking on a tag and seeing filtered results by this tag, while my app doesn’t have this functionality.

Shatsk lakes are extremely beautiful but tourism infrastructure is far from ideal there :slight_smile:

#16

You can also try a preference test or do some user testing to see what users prefer and why.

#17

Ironically, while searching the site from my phone (for the first time) I noticed the indicator at the bottom right showing [1/2]

chrome
chrome1080×1920 361 KB

#18

I did show the variants to the 3 users. They all preferred #1 because of readability. Although my concern is that scrolling many profiles would be entirely different, so I probably need to create several scrollable prototypes. Do you think I can do this with lo-fi prototypes or do I need hi-fi for such testing?

#19

Interesting that the forum engine developers were planning to remove it: https://meta.discourse.org/t/the-topic-progress-indicator/35148 Or maybe it was for desktop only. Would be interesting to read about UX of this feature.

Anyway, I’ve seen this pattern on forums, total number of replies and current position seem to be mandatory for any forum. But I have never met it during my research of dating apps or similar where users scroll through profiles.