Lenom.io UX/UI Suggestions
Congrats on this initiative Clément! Lenom.io is an awesome tool from which countless companies could benefit and also a great example of how Algolia can help end-users to find other people in just a few keystrokes! Thanks for sharing it with the community.
We’ve recently onboarded a few new people in the Solutions Engineering team, and took the opportunity to run a few internal workshops on UX. We’ve analysed your current app and identified potential UI/UX improvements we’d like to share with you today.
1. Tab Display
We believe that making the visual seperation of All, People and Teams content is more obvious with different tab styling.
The ‘ALL’ tab makes the distinction between teams and people a little more clear and allows users to select one tab at a time.
2. All Tab - People Results
The layout of the individual person result is largely the same as the current version. Our suggestion would be to update the grouping of the results. We display a selection of people results (the number would depend on the viewport height) in a vertical layout, followed by a grouping of team results in a horizontal carousel. We want the team to stay visible, but by doing that it will make the user feel Lenom has preselected for them the best N results. We feel this is a convenient pattern for mobile and a great way to provide a visual breakdown. After a few team hits, we allow the user to keep focusing on people (our understanding was that users are probably the most likely to search for people).
3. All Tab - Team Results
In order to differentiate between the people and team hits, we chose a different layout for the team results, specifically: different dimensions with a background colour and a horizontal layout. As mentioned in the previous point, thanks to the ever increasing popularity of touch devices, people have grown accustomed to swiping left to view more content. This can also be a great way to maximise on space. On desktop we think it could be a regular carousel in which people can see a few teams before having a button “Show all’ that once clicked would lead to automatically focus on the “Team” tab.
Because users tend to not interact with things that are not openly available, we suggest that the filters on the left begin auto expanded.
5. Highlighted Results
Currently it is quite hard for a user to see what parts of the query matched, particularly in the description part of the record. We would suggest underlining the matching query text in the record to give users a better understanding of the records.
6. Highlight Based on Non-textual Matches
If a user’s query matches in a second attribute (such a location) contextually display feedback to the user where the match happened. For example, by making the matching attribute icon more visible and including a textual match. By displaying the matching attribute we help people to understand the result set. Improving their perception of the quality of the results, in addition to making their life easier in finding the record they’re looking for.
7. Hashtag guided search
Because lenom.io has the ability to search through hashtags, teams and people, it might be helpful to build the user’s query up as they go.
Here is a good example of a keyword suggestion guided search, along with the source code. This can help users with discovery by displaying hashtags matching the current query, and hashtags associated to the current result set using the faceting feature.
With mobile first in mind, it makes sense to have these suggestions in cloud/blob format below the search bar to have one visual flow of data. As the user types (for example ‘extra’), the bar could suggest tags that match the query separately from the main results list.
8. Alternatives to the InstantSearch experience.
Making search with ‘#’ or ‘@’ adds a level of complexity most users won’t leverage. Why not leverage Algolia’s query rules to automatically filter the results when a textual query matches either a tag or a team?
For example, if a user types ‘extrabed’, then Algolia can automatically apply a filter for results. This could be displayed as a tag in the search bar to inform the user that this filter has been applied.
Alternatively, it would be nice if they do not have to use the syntax explicitly, or to have an autosuggest like Slack’s that helps the user to ‘learn’ the syntax by having ‘Modifiers’ as one of the sections of the drop-down.
If you have any questions about the topics we mentioned here please don’t hesitate to ping us!
Once again, this is an amazing project and we can’t wait to see where you take it next!