To understand how we move through communication pieces, and what we can do guide the viewer to move effortlessly through the piece. To this end, I analyzed lynda.com — its conceptual model as well as the visual patterns it employs to reinforce this structure.
Duration: 4 weeks
After a preliminary investigation, my first impression of lynda.com looked like this:
Things to think about
Who is this space for? Describe your audience. Think from their perspective.
There are two main types of users who may visit the site. The first user is someone who has some background/experience in the field they want to learn about — and probably knows which specific course they need. The second is one who has had no prior exposure to the field. Either way, the navigation bar offers a clear enough picture for the user to find what they’re looking for.
What are the goals of this space? How are the goals of the maker/owner different from the users’?
The goal of the piece is to provide educational videos around creative industries and businesses. It tries to strip away other distractions. For example, the site regularly posts articles and blogs, but there are tucked away behind a link called “article centre”, whichh appears in one corner of the home page. Once you enter a course, this is especially true, as there’s nothing else on the page. The site doesn’t prompt you to move to a different page through “new on the site” or “related” visibly, these are only shown at the very bottom of the page, or placed on the home page, away from the main content. I don’t think the goals of the maker are different from the user’s in the case.
Lynda.com and modes of thinking and learning
This week we read chapter 2 of Don Norman’s “Things that make us smart” in class. The main takeaway from this reading is that it’s important to evaluate, when designing a product, whether it’s encouraging the user to think the way you intended, or hindering such thought. Is it free enough for distractions so your user may properly experience what you have created for him? Does it provide the right tools to compare, contrast, organise, etc so the user can properly reflect on his choices and actions?
Lynda.com is a platform for providing educational videos. By definition, this requires the users to be focused, and think about the content they are consuming. The content of the space is decidedly reflective.
However, the space itself should be mapped out in a way that it doesn’t take mental effort on the users’ part to get to the page they need. If the navigation requires consideration, the user may not have enough mental capacity left to actually be able to focus on the content. The navigation of the space, therefore, should be experiential.
Building a conceptual model
Keeping in mind the points above while examining Lynda more deeply, I found that overall, the site structure is fairly easy to navigate, whether you’re completely new to what you want to study, or know what you’re looking for.
The home page features a navigation bar (more on that later), and a few sections that can be broadly classified into two buckets — “individual” and “community”.
The community section is fairly straightforward. It offers up courses from a macro level view of the site — ones that are new, trending, or featured.
This part of the site contains all the information that is related directly to the user. The two divisions here are “my account”, where the user edit their profile and configure preferences, and “my courses”, which shows a comprehensive user history, recommendations, and resources.
The course library
This an alphabetized index, which can be accessed through pages in the above two sections, or through two main filters — categories and software.
Categories are broad fields of interest, further subdivided into specific topics, relevant software, and resources. There are 12 categories that lynda.com has listed out, and these are repeated in a few places as a common sub-division scheme. Software can be accessed through a list of popular choices, or a complete alphabetized index.
These two classifications are what is shown in the navigation bar, which drops down when you hover over the “browse library button”
Clicking the “browse library” button shows the user the complete directory of courses. A user can also search through the library, and there several additional filters offered to facilitate this. One can narrow down options according to recency, author, skill level, duration, and more to find the courses most suited to their needs.
Once a decision is made, the user is taken to the particular page of the course they chose. These are, in my mind, are the fundamental building blocks of this website. The rest of the pages are just ways to access the courses offered.
A course page offers an introductory video, a detailed lesson plan, and course details (textual description, duration, last updated, etc), transcripts, FAQ’s, and a space to take notes.
Aside from these, the site has some links for quick reference — support, FAQs, apps, social media, etc.
As mentioned above, I see the site as a collection of course pages, with other pages making this collection accessible and comprehensible.
While I feel the category/software filtering is fairly clear, the community/individual filtering is spread out randomly over the home page. The individual-specific pages, especially, can be reached via two different parts of the site, which provide very similar information, but are not exactly the same. These could be consolidated, or some degree of uniformity could be brought in.
Refining the Coceptual Model
A short critique of the first draft revealed to me something that I knew intuitively, but had not quite been able to consciously identify: my conceptual map of Lynda.com is based almost entirely on an organizational view of the site. The ways to filter the course pages are far more detailed than a parsing of the actual content page itself.
Based on this feedback, I rearranged some of the items, and was able to create a clear distinction between the core content, the filters through which it can be seen, and supporting information for the site.
This model was generally well-received by my peers in a second round of feedback. The general consensus was that it makes sense and clearly illustrates the goal of the users (i.e.: to get to the courses, which are the main content of the site).
The second aspect of this exercise is to analyse the visual cues provided by piece in order to guide the movement of a viewer.
We kicked this off by first marking out the order of heirachy on a few key pages. This in itself was not super useful to me. However, we followed this up by reading excerpts of “The Image of the City” by Kevin Lynch, where he describes the five elements viewers utilize to create a mental map of a space.
Lynch’s Elements of a Space
Thinking about a communication piece as a physical space is a new approach for me, and one I found really useful. It helped me clearly identify the role each element is playing in the piece.
I noticed that the levels of heirarchy I had mapped out where more of less mapped to the
Combining the conceptual and visual models
Week 3 and 4
Note: Going forward, I decided to focus only on the courses, and the process of getting to a course page, since this is the core purpose of the site. I will ignore supporting materials (footer info and the article centre sections) since they don’t really affect the core objective of the piece.
It was clear after marking up Lynch’s elements of a space on a few key pages, that these map almost exactly on the my conceptual model — the visuals I was calling out as being important were the same ones I had pointed to on my conceptual map. However, to marry them seemed like nothing more than placing the key pages into my visual model, and the resulting diagram doesn’t provide a clear description of lynda.com.
However, I realised I could extend the terms “node”, “landmark”, and “district” to the organisational structure of the site, not just the visual elements.
I decided that course pages resemble districts a lot because they are essentially groupings of information, and each on it’s own is complete. The visual grouping of a video thumbnail with some descriptive text — which I marked up as a district — is a recurring pattern across the site.
I could also link filters to nodes — the are focus points which help move from one section to the next;
and list pages to landmarks — they present no information themselves, but only help the user situate themselves in the site.
I attempted to put these thoughts together in this digital diagram:
While attempting to articulate the connections I was trying to convey through this diagram, I realised I was getting my definitions mixed up. I went back to the original text by Lynch, and realised that it’s perfectly valid to show courses as districts; however, filters as nodes, and lists as landmarks are odd fits.
Filters function as landmarks
They are external points of reference that help the user to situate himself within the space. These exist in the form of navigation bars on the site for most of the filters (not discovery), though aside from this
Lists function as nodes
They are strategic focus points which lead the user to new infomation. A filtered list is a node, which leads to individual course pages.
The final diagram reflects the conclusions made above. I also made changes to the visual language to align with Lynda.com through type and colour choices. The final piece, I think provides a clear description of Lynda.com, and how one would navigate through.