Facebook Mockup (3 of 3)

Okay! I’ve been working my way through the final project part of the viking code school prep’s design course and I’m finally wrapping it up with this post! These mockups were all made in Balsamiq by me and are representations of facebook pages as labeled.

This is part 3 of this final project, part 1 and part 2.

This post is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

It’s also part one of the final assignment in the web design prep course, which involves tearing down the the facebook application from a UX and Design perspective, then doing a mockup using Balsamiq.

The Facebook Home Page

FacebookMockup1

The Facebook News Feed Page

FacebookMockup2

The Facebook Profile Page

FacebookMockup3

The Facebook About Page

FacebookMockup4

The Facebook Photos Page

FacebookMockup5

Facebook Design (2 of 3)

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

It’s also part one of the final assignment in the web design prep course, which involves tearing down the the facebook application from a UX and Design perspective, then doing a mockup using Balsamiq.

This is part 2 of this final project, part 1 and part 3.

This is going to be a rather long post since I’ll be answering nine questions for each of five pages at facebook.com. This is a great way to get familiar with facebook’s ins and outs, but probably won’t make for the most engaging read.

The Facebook Home Page

  1. The Visual Hierarchy of The Facebook Home Page (Login Screen)
  2. FacebookTeardown1

  3. Who is the most likely user of this page?
  4. The most likely user of this page is someone who does not have a facebook account or has not logged in on the computer they’re using. People who use facebook a lot tend to have it remember their credentials so they will not see this screen for very long at all.

  5. What is that user’s critical goal on that page?
  6. Either to sign in, or sign up for a facebook account.

  7. Does the visual hierarchy you sketched lead to that goal?
  8. It does, the two big call to actions are the login username and password and the “Sign Up” button on the bottom right.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Yes. The three elements necessary to log in are all close (proximate) to each other. The two text fields also share colors, the “Log In” CTA button is the same colors but reversed. All three elements have the same height and space between elements as well. As a consequence of sharing a height, they are all aligned vertically.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. Most of the page is helvetica, but the giant “Sign Up” form header is in “Freight Sans Bold” which appears to be a purchasable font by Darden Studio I’m not sure what to make of that, other than it’s a very bold, sans font that looks much better than if it was in Helvetica. Here’s the form in question with the font set to it’s default Freight Sans Bold:
    FreightSans

    And here’s the same section with that font set to helvetica:
    Helvetica

  13. How do these font families contribute to or take away from the site’s flow?
  14. As you can see above, the Freight font makes the Sign Up header much more bold and more of a call to action title. It’s letting the user know, hey you should pay attention to this form, but doing it subtly enough that users who already have accounts can ignore it.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. The major place I see the line spacing having an effect on this page is in the terms and conditions disclaimer near the bottom. The lines are crammed tightly together, making the text just beg to be ignored.

  17. What would you improve to achieve a better hierarchy or flow?
  18. The only thing I can think of is that the site is visually unbalanced. The bottom left quadrant is completely empty. This may be intentional to call attention to the CTAs on the right, but I’d like to see something there to balance the page.

The Facebook News Feed Page

  1. The Visual Hierarchy of The Facebook News Feed Page
  2. FacebookTeardown2

  3. Who is the most likely user of this page?
  4. A user with a facebook account, probably who lives in the United States.

  5. What is that user’s critical goal on that page?
  6. Looking at information that people they are connected to feel is important enough to share with the world. A secondary goal would be posting information that the logged in user believes is important enough to share.

  7. Does the visual hierarchy you sketched lead to that goal?
  8. It does, though the right hand menu has questionable utility for me since it’s either Ads or just clutter. It’s so low in the visual hierarchy that it may as well not exist. I’d much prefer to have some additional white space in the design.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Yes, it’s obvious that I can share things very quickly using the post box on the top of the page. The first post is also quite eye catching and probably interesting, drawing me in to reading the news feed. The news feed is larger than the left and right columns (Contrast), it has Repeated elements (posts), it’s center Aligned, and the way to interact with it (the post composer box) is very close to where my post would appear (Proximity). All in all, the elements relationships are quite good at leading me to my goal.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. Facebook is using helvetica everywhere as far as I can tell. I would guess that this is because Helvetica is a font that’s present on just about every device, mobile or not. Also, apparently it’s a “brilliant and inoffensive” font that appears many, many, places.

  13. How do these font families contribute to or take away from the site’s flow?
  14. This was a fun question to answer. I used Chrome’s developer tools to edit the font family on the page to “Times” and looked at the result (below). It’s obvious that Helvetica is informal, clear at various sizes and weights, and works for large blocks of text and titles.

    Here’s facebook with the “Times” family (I’m amazed how much this changes the site)

    FacebookWithTimesFontFamily

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. I tried to mess with this using the developer tools, but the differences were nowhere near as dramatic as the font family change. The line weights are important, however. Both for determining which parts of the page are most important (they have slightly larger line height) and giving the text a lot of room to breathe (whitespace)

  17. What would you improve to achieve a better hierarchy or flow?
  18. I don’t like the fact that they have quite a large blank spot for you to type a post into. I’d like to see it be condensed to a single blank line that expands if you click on it or hover over it. I think that this would help users’s flow through the site by letting their vision immediately go to the content below rather than getting snagged on the large white post box.

The Facebook Profile Page

  1. The Visual Hierarchy of The Facebook Profile Page
  2. FacebookTeardown3

  3. Who is the most likely user of this page?
  4. A registered facebook user looking for more information about another facebook user.

  5. What is that user’s critical goal on that page?
  6. To find out information about the user who’s page it is. I would mention that photos may be prioritized for this task because they contain large amounts of subtext that text can lack. So, the goal could also be “To look at pictures of the person who’s profile it is.”

  7. Does the visual hierarchy you sketched lead to that goal?
  8. Yes, the person’s profile picture in the top left corner is the first thing that they eye’s are caught by. Then the “cover picture” behind that profile picture. After that, you see a feed of their posts though, and have to choose a non-visually-prioritzed “Photos” link to see more pictures.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. They do, especially if we take the goal as “Learn about this person” the news feed down the middle is repetitive, large, contrasting, and very much has information about the person. It shows what they’ve been putting on facebook in reverse chronological order (most recent first).

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. It’s still Helvetica everywhere, see my comments above.

  13. How do these font families contribute to or take away from the site’s flow?
  14. This page is very similar in the way the font family impacts it to the last one, see my notes above.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. This page is very similar in the way the font spacing impacts it to the last one, see my notes above.

  17. What would you improve to achieve a better hierarchy or flow?
  18. Interestingly, one of my complaints about the news feed page was the right hand column, on this page that column is very used and adds nice information about when the information you’re looking at was posted. I might also add a bar of recent photographs above the first post, since my impression is that when reviewing profiles people generally look for pictures first.

The Facebook About Page

  1. The Visual Hierarchy of The Facebook About Page
  2. FacebookTeardown4

  3. Who is the most likely user of this page?
  4. Someone who’s looking for the history of this profile owner in a more than casual way. One example is that prospective employers will probably look at this page.

  5. What is that user’s critical goal on that page?
  6. To find in depth information on the user who owns the profile.

  7. Does the visual hierarchy you sketched lead to that goal?
  8. From just looking at the picture I sketched above, you might not think it does, but I think what facebook does with this page is actually pretty clever. They de-emphasize all the sections below the cover photo and profile picture. This has the nice effect that you can scroll through the sections without your attention being “grabbed” and look for specific information more easily.

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Interestingly the de-emphasis of the sections underneath the profile picture means that “Contrast” has less of a role on this page. Repetition is very strong though, each section of the about page looks very similar, it’s a box with a header and some stuff in it. This makes it easy to review. All the sections are center aligned as well, so that doesn’t play as huge a role. There are some nice columns in each individual section, however. The center alignment also means that “Position” isn’t as key on this page, at least not for the sections, the positioning inside each section is well done to enhance important elements.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. It’s still all Helvetica.

  13. How do these font families contribute to or take away from the site’s flow?
  14. The same way that I’ve mentioned above, it is nice that the font families are very consistent across the site.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. The line spacings are also very consistent across the site, non-important things are squished together like books and subtitles, important things like job information are spaced out.

  17. What would you improve to achieve a better hierarchy or flow?
  18. There’s nothing that bothers me much about this site, I think that putting the photos section nearer the top would be nice, but there’s a “Photos” link so that might be redundant. I think that this page works very well.

The Facebook Photos Page

  1. The Visual Hierarchy of The Facebook Photos Page
  2. FacebookTeardown5

  3. Who is the most likely user of this page?
  4. A registered facebook user who wants to see pictures of another facebook user.

  5. What is that user’s critical goal on that page?
  6. Look at someones pictures without necessarily interacting with them (the dreaded accidental like)

  7. Does the visual hierarchy you sketched lead to that goal?
  8. It does. There is nothing on this page other than the standard header and a tightly packed photo gallery, it’s great visual hierarchy because it’s very very simple: Here’s pictures!

  9. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
  10. Well the pictures contrast with the background nicely (unless it’s a picture fog I guess), the repetition is quite nice of the photo grid, they’re aligned to columns, and photos seem to be positioned in chronological order so the relationships are good.

  11. What font families are most prominent on the page? (use the WhatFont add-on or your browser’s developer tools to inspect this).
  12. Still helvetica.

  13. How do these font families contribute to or take away from the site’s flow?
  14. They don’t on this page, there’s hardly any text.

  15. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?
  16. There’s almost not text, so they don’t have a large impact.

  17. What would you improve to achieve a better hierarchy or flow?
  18. There’s nothing I would change about this page, one thing I want to mention that is quite clever. When you look at the photo grid there is no apparent way to “Like” a photo, but if you hover over the photo some information and a “Like” link appear. This is quite clever, it reduces the number of accidental likes (a fixed button might lead to more accidents, for example), but still allows users the ability to “Like” directly from album view.

Facebook UX (1 of 3)

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

It’s also part one of the final assignment in the web design prep course, which involves tearing down the the facebook application from a UX and Design perspective, then doing a mockup using Balsamiq.

This is part 3 of this final project, part 2 and part 3.

  1. Who is the main user of Facebook?
  2. A person in the United States with access to the internet. Facebook isn’t as popular in the rest of the world.

  3. What are the top 3 critical goals for that user?
  4. 1. See interesting events in and information about friend’s, family, and acquaintance’ lives (posts).
    2. Look at pictures of friends, family, and acquaintances (Facebook friends).
    3. Communicate with others.

  5. What is the site’s approximate information architecture? (in general — don’t get caught up in the details too much)
  6. FacebookUXArchitecture

  7. For your top user goal, what is likely to make the user’s experience particularly satisfying?
  8. Extremely easy access to interesting information about the lives of your Facebook friends. Note that “interesting” is much harder to achieve, and very linked to, “easy”.

  9. To accomplish this goal, how does the user flow through the site’s architecture?
  10. To accomplish this goal, how does the user flow through the site’s architecture? (ie. which pages are visited and what are clicked?)
    When a user logs in they’re presented with their “Newsfeed” which is a list of photos/comments posted by Facebook friends which they can scroll through. Here’s an example of what one of these posts might look like

    redacted-Screen Shot 2015-07-06 at 4.36.05 PM copy

    As you can see each post has at least two ways to look at (or interact with via messages) the person who posted it’s profile. You can also comment, like, and otherwise interact with posts. So, the flow generally goes Newsfeed to Profile/Post to Interact with posts/users.

    FacebookUXFlow

  11. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?
  12. There are three main types of navigation, the first and most important is the top bar, which you will always see when you’re on facebook. This bar gives you a “home” button (the facebook icon, search bar, and fast access to various other parts of the site. If the user gets stuck somewhere they know they can get “back to the start” by clicking the facebook icon.

    The secondary navigation is NOT the left nav bar that exists at the start of the news feed, nor is it the configurable right hand “Chat” sidebar which I suspect most people simply keep turned off. The other navigation is pretty much clicking on profiles and posts. Since this is a fairly “flat” site (you’re looking at newsfeed, user, or post usually) there are no breadcrumb like navigation elements that I can find.

  13. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?
  14. As I alluded to, the biggest thing that facebook does really really well to help users with their goal is put -interesting- content first. There is actually quite a lot of controversy about this because most people aren’t aware of just how much facebook messes with the order. However, making the top of the page the information that people are likely to read/interact with/be interested in is facebook’s number one goal and they’re really good at it.

    They also make it really really easy to keep looking at content. The Newsfeed scrolls infinitely, when you reach the bottom it just adds more to the bottom. I actually don’t think it’s possible to get to the bottom. This is a great way for facebook to make sure that people see lots of interesting information and keeps people engaged with the site.

    The final important thing that facebook allows users to do is “Hide” people/groups/posts from the Newsfeed. This allows people to tell facebook which things the don’t like and improve how interesting the content is.

  15. What does Facebook do poorly when allowing the user to accomplish the top goal effectively, efficiently and with good satisfaction?
  16. Well, there’s quite a bit space that could be used for interesting content, but is consumed by ads instead as you might expect with a free service (they have to make money somehow). They also make a habit of messing with news feeds to see what people like better, which may make things less “interesting” in the short term, but perhaps better in the long term.

Design Teardown of Medium.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

Here is the visual hierarchy for the site medium.com as I sketched it.

MediumTeardown

  1. Who is the user?
    The key user is someone who is looking for long form (more than a five minute read usually) writing to read and enjoy.
  2. What is the user’s critical goal?
    The users critical goal is to settle in with a piece of writing and enjoy it from beginning to end with minimal interruption.
  3. Does the visual hierarchy you sketched lead to that goal?
    I’m going to put in a disclaimer here that of all the sites I’ve been reviewing, medium.com is the only one I really truly love and spend a lot of time on. With that said, YES! Medium.com’s visual hierarchy leads users towards pieces that they can read with minimal interruption. The thing that hits you when you visit the site is that there is TONS of whitespace. Every comments link, header, and tiny bit of text is given enough room that it really stands out on the page.

    This is awesome because it means that the site’s visual “background noise” is very low allowing it to achieve great impact with very simple visual hierarchy cues. Here’s an example:

    TMZComparison copy

    MediumComparison copy

    Did you even notice the “Loud” box on the TMZ page? What this means in practical terms is that medium can use very subtle visual cues to achieve great impact. This is great for the flow of reading long form articles because it’s an extremely effective strategy to avoid user eye strain.

  4. What font families are most prominent on the site?
    Well, one really cool thing is that the medium icon in the top left of the site is actually a custom font they packaged called medium-icons – regular. This is the single most visually compelling element on the page because it’s positioned in the top-left corner, quite large, and bolded. This is the only page I’ve reviewed for this assignment that hasn’t had an image logo. I’d imagine this makes later changes to the page much easier.

    Also, there’s a font stack for the large text on the site:
    jaf-bernino-sans, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, Geneva, Verdana, sans-serif;

    And a font stack for the smaller, body text on the site:
    freight-text-pro, Georgia, Cambria, ‘Times New Roman’, Times, serif;

  5. How do these font families contribute to or take away from the site’s flow?
    The title font of freight-text-pro is a serif font with nice tight kerning. It looks a bit like a typewriter font, I would describe it as “boxy”, but overall it reads very, very nicely and looks pleasent.

    To my un-design-educated eyes, mediums title text font (jaf-bernino-sans) looks clean and condensed while still managing to maintain some nice spacing. You can learn more about this font here, and it was interesting looking through all the different ways it can appear. It’s sans serif and tightly packed together (kerning) horizontally and vertically. This is a good counter example for the rule that title’s should be serif fonts.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    I mentioned it above, but I’ll say it again. There is space around every piece of information and text on the page and it makes the page feel very flowy and light. This effect is enhanced by the line spacings being large, colors being generally light (with a few exceptions on the buttons), and font weight being light.

    One thing I really appreciate that helps the flow is that they have both large amounts of space between stories AND a horizontal line to demarcate. Doesn’t this just feel roomy (and clear)?

    MediumSpacingOfArticles

  7. What would you improve to achieve a better hierarchy or flow?
    Generally, I think that medium.com is a triumph of visual design and has a great hierarchy. The only thing I might change would be to decrease the visual significance of the “Start Writing” button. As far as I know medium is supposed to be a place for polished, sometimes professional, writers. How many people actually write for it? It doesn’t seem worth the distraction for most users if only a few click that button.

Design Teardown of Huffingtonpost.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

Here is the visual hierarchy for the site huffingtonpost.com as I sketched it.

HuffPoDesignTeardown

  1. Who is the user?
    The key user is someone who is looking for an entertaining and informative collection of world news stories gathered from other sites.
  2. What is the user’s critical goal?
    The user’s critical goal is to find out what is going on in the news across several different (left-leaning politically) publications.
  3. Does the visual hierarchy you sketched lead to that goal?
    The visual hierarchy on Huffington post leads users directly to their goal of an interesting story. In my sketch you can see that the darkest two boxes (most attention grabbing) are right at the top of the page. These two boxes are actually a headline and image. Underneath are links to several different stories covering the same news item. It looks like this currently:

    HuffPoHeadline

    Each of those items between the ellipses (the “…”) is a link to a different news story on a vote happening in Europe right now.

    Notice that the site’s palette is quite active. There are red and blue links as well as a black header in this picture. There’s also green further up the sited (in the nav bar). This actually works for helping users accomplish their goals because the site has abundant white space. There are colors, but there’s also quite a bit of space between the colored sections.

    All in all, this site’s visual hierarchy leads the user through the content in this order: Lead story, image for lead story, then smaller headers and stories. This seems like a good visual hierarchy for this site. My final note is that there are NO ads above the fold. The visual hierarchy is trying to hook users in with content before showing them the ads.

  4. What font families are most prominent on the site?
    Ignoring the “Huffington Post” title/logo at the top of the page because it’s an image, there are two font families in use. For large titles and the nav bar the site uses the following font family: OpenSansCondensed. For everything else (body text, smaller headers, quotes, etc) this is the font stack: Arial, Helvetica Neue, Helvetica, sans-serif. There are a few instances of the site just using Arial, but mostly it’s the more font stack above.

  5. How do these font families contribute to or take away from the site’s flow?
    I think that both of these font families contribute nicely to the site’s flow. This is a less formal news-aggregator site, so a serif font for the headers would have been too formal for titles and headers. Instead they’re using OpenSansCondensed which is kerned so the letters are quite close to one another yielding the large visual impact that headers need.

    The font stack for the text seems like a good web-font stack. None of the fonts have serifs, which is good for this site’s informal tone. Interestingly, this font family is used in several different sizes and looks fine for all of them.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    The vertical line spacing has a nice flow on this site. There are horizontal lines between articles which clearly delineate one from another and headers and text have good spacing. Without the horizontal lines this site would have much less flow.

    HuffPoLineSpacing

    The columns of this site are rather close together, I found my eyes skipping between columns quite a lot. I think flow would be improved by adding more whitespace between columns. You can see above that they have a vertical line separating two columns, I don’t like that choice for two reasons: 1) It’s inconsistent. There’s only one vertical line and it separates the middle column from the left. I want to have one between the middle and right column too if they’re going to be on the page. 2) It makes the content feel compressed and caged. I think that whitespace will separate, but also give the content breathing room.

  7. What would you improve to achieve a better hierarchy or flow?
    There is a huge amount of content on this site and it all feels quite crammed in. My major changes would be aimed at making things feel more open. To that end I would first narrow or remove the gray bars that are around the “content” section of the page. I’d then use the space to make the columns a little more spread out. As a final change I would reduce the size of the text that makes up the quote cloud under the lead image. As it is it’s a little too large, I think it would help the site’s flow if user’s saw the stories sooner.

Design Teardown of Nytimes.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

Here is the visual hierarchy for the site nytimes.com as I sketched it.

NYTimesTeardownNoBlackLine

  1. Who is the user?
    The key user is someone in the United States who very likely has a liberal (democratic) political viewpoint and is interested in the news.
  2. What is the user’s critical goal?
    The user’s critical goal is to learn about what is going on in the world by reading relevant and important news stories.
  3. Does the visual hierarchy you sketched lead to that goal?
    The visual hierarchy does lead the user towards that goal quite well. White space is used well and content is not crowded together. The different header sizes communicate which stories should be looked at first, and color is used sparingly to highlight useful navigational elements.

    The thing that I really didn’t like about the NTtimes.com home page was just how much of the space was taken up with ads. The “New York Times” title of the page is bracketed by ads on the left, right, and bottom sides. That ends up meaning that 1/4 of the space above the fold is taken up by ads. This clearly is an intended part of the visual hierarchy since the ads are all for purchasing the NYTimes online subscription, but it doesn’t help the user get to their goal.

  4. What font families are most prominent on the site?
    This is a fun question because when you use WhatFont on the most prominent text on the NYTimes homepage it looks like this:

    NYTimesHeader

    Which seems like an easy answer, I guess the NYTimes logo is in “nyt-cheltenham” which is clearly a custom font, so that makes sense, too bad it’s completely wrong. If you use your browser’s developer tools on the NYTimes header text you can see that it’s actually an image. This is because that text isn’t just text, it’s also the logo for the entire NYTimes company and product line. Since it’s such an important part of their branding they hired a consultant named Matthew Carter. Matthew Carter is quite clearly one of the best, he designed Verdana and Georgia, two very popular web fonts.

    So, the answer to this question is that the NYTimes has a custom made font for the most prominent text on their site (their logo). They use a custom made font called “nyt-cheltenham” for their large headers and a modified version “nyt-cheltenham-sh” for their small headers. They also specify fall back font families for their headers of: nyt-cheltenham-sh, georgia, ‘times new roman’, times, serif. Finally, I can’t resist mentioning that the small amounts of actual article text they have on their home page is in the Georgia font, as designed by Matthew Carter.

  5. How do these font families contribute to or take away from the site’s flow?
    I’ve already discussed the logo, at some length, so lets take a look at the header font family fallbacks:

    nyt-cheltenham-sh – This is a custom typeface, presumably derived from cheltenham. This custom typeface was designed by Matthew Carter for the NYTimes. This is a font with serifs and quite tight kerning which gives it a “Victorian” look.

    The font families continue through some fonts that should be installed on every system: georgia, times new roman, times, and finally serif. As you can see by this last entry they really want to make sure to use a serif font for the titles.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    The line spacing is quite tight because this page is intended to emulate a print newspaper and also present as many headlines as possible so users (readers) can choose what they are interested in in.

    NYTimesLineSpacing

    As you can see from the small snippet above, the headers have more space than the article text, but only a little. Mostly, the space is used to separate different stories. They use the font weight to indicate what is a heading and what is not. Color is used very sparingly to indicate things that are clickable that would otherwise look like body text, see that “Comments” link?

    All of this contributes quite a lot to the sites flow because it’s, at it’s core, an online newspaper. It does a great job of presenting its content in such a way that it both looks like a newspaper and works well as a website. The imitation of print means that the site is not perfect. For instance, it would help the flow to see more space between all the elements on the page and more headlines. Also, the image is small, users tend to react to and click on images, especially when they’re large.

  7. What would you improve to achieve a better hierarchy or flow?
    It’s not realistic because the NYTimes is a print publication as well as a website and they need to have the two be tied together, but in order to make this site have better hierarchy I think they should use fewer columns so users can see what they should be paying attention to easier. More white space would make things easier to read as well. There is so much information on the page it’s hard to know where to look.

Design Teardown of Tmz.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

Here is the visual hierarchy for the site tmz.com as I sketched it.

TMZVisualHierarchy

  1. Who is the user?
    The key user is someone who is interested in what US celebrities are doing. This could be someone in the US or outside of it, I don’t know.
  2. What is the user’s critical goal?
    The user’s critical goal is to find out what the latest celebrity news (gossip) is BEFORE their friends know. This may seem too specific, but it is made very clear by the heavy emphasis on when they were “first to break the story” here.
  3. Does the visual hierarchy you sketched lead to that goal?
    The visual hierarchy I sketched is mostly dark gray indicating things that are screaming for attention. The site itself actually mostly looks like this:

    TMZHeader

    Notice that the site’s palette consists of extremely heavy and attention grabbing reds and blacks. This makes it very hard for the site to have a good visual hierarchy because every element on the page demands attention. The user’s attention is not drawn anywhere, it bounces across every element on the page looking for the important parts.

    Exacerbating the color problem, the site uses a two column design, but it’s very difficult to tell what is an ad and what is not. This site resoundingly fails to use a visual hierarchy to guide users attention.

  4. What font families are most prominent on the site?
    The logo to the site is a custom font, which was probably custom designed. As far as I can tell every piece of text on the site that is not embedded in an image has these font families: Source Sans Pro, arial, sans-serif. So those are definitely the most prominent font families.

  5. How do these font families contribute to or take away from the site’s flow?
    Using the same font families for everything on the site doesn’t seem advisable since it makes it hard to differentiate different kinds of text. Luckily TMZ’s site is so chaotic this doesn’t make much of a difference. On the other hand, the TMZ site is the definition on an “informal” site so they are at least using sans-serif text which matches that.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    There is a severe lack of spacing between articles, but the large line spacing in the small amounts of article text makes the text easy to read. The sizes of the headlines and images on the page is very very large. This creates the same effect as typing IN ALL CAPS. It’s a visual version of yelling. The yelling effect is enhanced by the amount of red text on the site. Interestingly, all of this does fit with the tabloidesque feel of the site.

  7. What would you improve to achieve a better hierarchy or flow?
    This site could be vastly improved by a few very simple changes that would make each article more compact, and draw the eye to certain ones as well.

    1. Change the color scheme, black on red is very hard on the eyes. Perhaps a lighter shade of red? Grey text?
    2. There is a red box around an article at the top of the page, presumably this is a featured article. Remove the red box, the fact that it’s the top article guarantees it will get attention.
    3. For every article in the left hand column, reduce the size of the headers so they’ll all fit on one line.
    4. Reduce the amount of article text to two lines.
    5. Standardize the way the articles are formatted so it’s clearer where one ends.
    6. If possible reduce the color in the right hand “ad” column.

All together, this should make the site more usable by providing a readable flow of articles and reducing eye strain.

UX Teardown of Airbnb.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

  1. Who is the key user?
  2. A traveler who wants to have a fun, non-business, trip.

  3. What is that user’s number one critical goal when using the site?
  4. Easily find somewhere to stay that is non-standard (not a hotel) and that is in their price range, desired location, and time frame.

  5. What is likely to make that user’s experience particularly positive
  6. The user wants it to be easy to see what the place looks like and know what the experience will be in advance. They also want to quickly narrow offerings down by location, time frame, and price. Finally, it should be simple to pay for and reserve places to stay.

  7. What is the approximate information architecture of the site?
  8. Screen Shot 2015-06-30 at 5.32.54 PM

  9. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?
  10. Screen Shot 2015-06-30 at 5.32.48 PM

  11. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?
  12. There is a top navbar with a “Home” button (the Airbnb icon) on the left as well as “Log in”, “list your space”, and “Sign Up” links on the right, there’s also a footer on some pages with more information about the Airbnb company and community. What’s nice about all of that navigation is you can totally ignore it as the average user of the site. It’s there for more advanced users. For the average user all the action happens in the main body of the page.

    Specifically, the average user will spend most of their time on the “Map/Places to Stay” screen. It’s divided in half and lets you review room locations and pricing easily. When you open a place to stay you get a new window (or it navigates you there). There are only three levels though so you can’t get too lost. One nice navigational touch is when you’re using selecting locations there are breadcrumbs on the bottom of the “Places to Stay” pane on the left. This helps you know “Where you are”.

    The navigation is also very clear about “Where am I?” because there are very limited places the average user is going to end up. They’re probably going to be looking at a map of possible places to stay, or a specific place to stay. When looking at a specific place, the browser’s back button will work to go back to the map and this is what most users will expect.

  13. What key interactions does the user have? Are they clear and usable?
  14. One of the great strengths of the Airbnb site is how few clear key interactions are required for most users. The fact that there are only a few, very clear, interactions to choose from makes the whole site feel more cohesive and easy to use.

    It’s very easy for a user to look for a place to stay using the map/places to stay page. The search is very intuitive and easy, they have nice calendars to choose your dates from take all sorts of different input in the location field. It’s also easy to look at and book a place to stay. Airbnb puts everything you’d want to know on one page, the answer to “Did people like it?” is answered by reviews, “How much does it cost?” is answered very obviously on the top right.

  15. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?
  16. Information is presented in an easy to find way with the important parts first and high in the visual hierarchy (colored, large, etc.). The user isn’t required to do any extra thinking or clicking. It’s a very visually prioritized and clear site.

    The navigation is also very consistent and shallow, you’re either looking at a map or a place you might want to book. It’s very simple and powerful with just the right blend of information and whitespace. It’s also effective that Airbnb segregates the “find me a place to stay” tasks from the “I want to rent my place” tasks.

  17. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?
  18. There is no “Back to Map” button. This is fine for most, but users who are less comfortable with technology may get frustrated. The site is also extremely “heavy”, the search page is both a google map with many pins AND a huge image gallery with text. This means that there’s a huge amount of data being transferred. I actually found myself on a DSL connection while writing this review and the site was slow enough it was noticeable.

UX Teardown of Amazon.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

  1. Who is the key user?
  2. Someone (probably in the United States) who needs to buy something online.

  3. What is that user’s number one critical goal when using the site?
  4. Purchase a specific item as quickly and easily as possible as well as being shown related items that may be helpful.

  5. What is likely to make that user’s experience particularly positive
  6. Amazon makes it very easy to find items to purchase, and they have a huge catalog: Almost anything you could want is available. They also make it very easy to go from “Ooooh” that’s cool to “It’s in the mail.” This is great for users because it means that the entire purchasing process is very streamlined. Amazon is also very good at presenting products based on other things viewed, this allows users to find things that they might have forgotten or not been able to locate otherwise. Finally, Amazon’s reviews are very good indicators of the quality of a product, which helps users find excellent items.

  7. What is the approximate information architecture of the site?
  8. AmazonInformationArchitecture

  9. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?
  10. AmazonUXFlow

  11. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?
  12. Amazon has several navigation elements that are blended together to make a slightly busy, but very functional whole. There is a top of the page navigation bar displaying a search bar, how many items are currently in the user’s cart, Account Information, and a drop down menu titled simply “Shop by Department”. This drop down menu is amazing because it is huge and still manages to be very responsive. The secret behind how they manage this is tracking mouse movement direction. This navigation menu is extremely well designed and gives you access to Amazon’s many departments and sub-departments in a few clicks.

    Once you’ve entered a department a left side bar appears to allow you to filter items based on various criteria like price, brand, and size. This is a nice secondary navigation UI. It ties in well with the already established top nav bar and drop down.

  13. What key interactions does the user have? Are they clear and usable?
  14. The users key interactions can be categorized into either locating the item of interest and purchasing it. In the simplest case a user uses the search bar on the top of the page and is shown exactly to the item they want on the first page of results (typing “Fitbit Charge HR” for example). The first result is the Fitbit Charge and clicking on either the product picture or name will open the product page. This is a good example of low friction searching and selection.

    On the product page the eye is immediately drawn to a yellow button labeled “Add To Cart” which really stands out on the page. Clicking that adds the item to the cart and brings the user to the cart, starting the purchasing process.The user can then click the very prominent “Proceed to checkout” button and buy the item. If the person has used Amazon.com before all the billing and shipping info is filled in automatically and there are very few button clicks until the item is ordered. It’s really key that all the buttons that get the user closer to their goal really stand out (they’re yellow and large) and look the same.

  15. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?
  16. There are several things, but generally the site does a very very good job of remembering previous information (billing info, etc) and eliminating any duplication of that effort. It also does a very very good job of finding the product the user is after. Even if the initial search fails, there are several tools like the big dropdown of departments and the left “restrict by criteria” menu that allow things to be found in most cases. The UI is also very consistent, anything in yellow is going to be very important to move forward, everything else is in more muted tones.

  17. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?
  18. Amazon.com is one of the most finely honed sites I’ve encountered on the internet. My only complaints have to do with how -well- it does the job of recommending products (I don’t like seeing ads for things later). That and the density of the navigation could be reduced possibly? The whole site is just very clean, clear, and does the job.

UX Teardown of Twitter.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

  1. Who is the key user?
  2. Key User: A (likely younger than 60) person looking for new and interesting information and communication channels.

  3. What is that user’s number one critical goal when using the site?
  4. See and interact with interesting, powerful, and funny content on a topic that they connect with. Secondarily: Save particularly good feeds for later viewing and reference.

  5. What is likely to make that user’s experience particularly positive
  6. Easy access to large amounts of interesting information that appeals to many diverse interests combined with easy interaction and communication around that information.

  7. What is the approximate information architecture of the site?
  8. TwitterUXArchitecture

  9. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?
  10. TwitterUXFlow

  11. What style(s) of navigation is/are used? Do they answer the two key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?
  12. The primary navigation is a top bar with the twitter bird as a home button in the top left. Much like Amazon.com there is a left hand “refine” menu with lots of categories that appears in some situations.

    This is a site where the flat nature (not many layers of options) means that it’s easy to know where you are. Users/feeds have their own pages, home button is always there and you’re looking at either a category or a twitter feed. To know where to go next is not so easy. It’s not always immediately obvious what the “Next step” is to subscribe to a feed.

  13. What key interactions does the user have? Are they clear and usable?
  14. It’s very easy for a user to view information, very easy and everything leads to it. This is the thing that twitter.com does best: Show you the feeds. Another key interaction is saving information for later viewing (subscribing to feeds), very easy in some places, not obvious in others (category listings).

  15. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?
  16. The twitter bird is always on the left side of the navigation bar and returns you to the home page no matter where it’s clicked. Very powerful for making a user feel in control, easy to “Just get me back to the beginning!” It is easy to discover new information (feeds, users, posts, etc) in relevant categories as well and find specific feeds you may already know about.

  17. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?
  18. Posts are always displayed in the center column and look very similar, but sometimes you can “follow” and sometimes you can’t. It requires knowledge of how twitter works to figure out why that is. It’s not possible to follow aggregate feeds.

    It is not always obvious what you’re looking at, extra clicks sometimes are necessary to save content. No way “back” once you’re looking at a single feed.