Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
medium bookmark / Raindrop.io |
My most favorite site is unarguably YouTube. One might say I am addicted: I have it open at all times throughout my day, religiously using it for education, entertainment, and music — a beautiful trifecta that meets all of my basic needs. However, my addiction extends far beyond the content, creators, and community. YouTube has some incredible IA, design patterns, and flows. With this article, I’d like to go through some that I absolutely adore.
Information architects, Louis Rosenfeld and Peter Morville, defined the ‘three circles of information architecture’ as content, users, and context of use.
What Is Information Architecture?
In the simplest of terms, information architecture is the art and science of organizing sites so that information it is easy to find and intuitive. When designing flows, it is important to know the four modes of searching information.
According to information architect, Donna Spencer, they are: 1. Known-item search, 2. exploratory seeking, 3. don’t know what I need to know, and 4. re-finding
Each information-seeking behavior relies on specific navigational tools to succeed. I adore Youtube because their design patterns support all 4 information seeking behaviors. Allow me to elaborate!
1. Known Item Search
“When the user knows what they want, knows what words to use to describe it, and have a fairly good understanding of where to start.” (Donna Spencer).
There are a number of design approaches to help with this type of task, but search and navigation is the most common, both of which YouTube successfully integrates:
Search bar, located on the top for convenient access
Search
Strategically located on the top of the homepage, the search bar is easily accessible for those who know exactly what they want amidst thousands of unrelated videos. I always use it — Mainly because of simplistic task flow: Home -> Search Video -> Select Video -> Watch video
Discretely discernible navigation panel
Navigation
Clicking on Youtube’s hamburger menu located on the left side of the screen reveals and hides a global navigation panel.
It is discrete enough that it does not hinder the viewing of the site’s main content, but also discernible enough such that users can easily access all of the known navigational headings.
Typical flow: Subscriptions -> Select Youtube Channel Of Choice -> Search Or Select Video Of Choose -> Watch video
2. Exploratory Seeking
Definition: “When people have some idea of what they need to know. However, they may or may not know how to articulate it and, if they can, may not yet know the right words to use. They may not know where to start to look. They will usually recognize when they have found the right answer, but may not know whether they have found enough information.” (Donna Spencer).
Autocomplete with recommended drop down list of search terms
Autocomplete
When you start a search on Youtube, you can find the information you’re looking for faster using search predictions.
A drop-down list of possible search terms related to the context of what you are typing can help you articulate what it is that you may be searching for.
Filter by upload date, type, duration, and special features. Sort results by relevance, view count, and rating.
Filters
One advantage of YouTube’s filter design is the ability to manipulate the search process information.
I typically use filters when I have an inkling as to what I want, and aim to further eliminate results that do not meet the duration I fancy. Oftentimes, it will leave me with satisfactory results.
3. Don’t know what I need to know
Definition: “People often don’t know exactly what they need to know. They may think they need one thing but need another; or, they may be looking at a website without a specific goal in mind.” (Donna Spencer).
Carousels recommendations can be selectively fine tuned for a more personalized homepage.
Carousels
The homepage is filled with categorized carousels, a smart way to explore many videos all on 1 screen.
Because carousel sections are selected based on past viewing history, the experience is entirely personalized. I use it when I don’t know what content to watch but want suggestions.
Typical flow: Homepage -> Recommended Carousel Category -> Select Suggested -> Watch video
4. Re-finding
Definition: “People looking for things they have already seen. They may remember exactly where it is, remember what site it was on, or have little idea about where it was.” (Donna Spencer).
Believe it or not, I spend a lot of time hunting down information I have already seen. Again, there are a number of design approaches to help with this type of task, but “History” and “Watch Later” solutions work well for individuals who (like me) want to save, easily find, and or return to a video in the future.
Watch later by saving and returning at a more convenient time
Watch Later
Oftentimes I’ll find a video I want to save and watch at a later due to time constraints.
I simply click on the “Watch Later” button and successfully save it (indicated with a check button) to the “Watch Later” playlist. I can access the playlist conveniently from my navigation panel in the future.
Conclusion
Undoubtedly, the most spectacular part of Youtube is the range of existing solutions for each mode of information searching. (What I described above is not an exhaustive list). Different users approach information in different ways, and it appears YouTube knows their user base’s want(s) exceptionally well. This then permits them to design successful solutions that user’s need. At the end of the day, it is the incredible usability that keeps me coming back to YouTube, and it’s certainly no surprise why I (and many others) remain loyal.
