Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

UX Design Patterns

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

First Impressions

5:44 with Anwar Montasir

What defines an aesthetically pleasing design? That’s a complex question. But since we’re concentrating on making a solid first impression, we’ll focus our answer on two principles: Grid and Visual Hierarchy.

Vocabulary

  • Bounce rate: the percentage of users who visit a web page and leave without taking any action.

  • Aesthetic-Usability Effect: users often perceive designs that are aesthetically pleasing as being more usable

  • Grids: a series of invisible lines that determine where your content will align. Neatly aligned content looks cleaner, more professional, and more aesthetically pleasing than content that’s poorly aligned.

  • Visual hierarchy: presenting design elements to show their order of importance.

  • Law of proximity: objects near each other tend to be grouped together conceptually

Further Reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    In the first stage of this course, 0:04
    we learned three key facts about the behavior of web users. 0:07
    To review, we learned that users form a first impression of web pages 0:12
    within 50 milliseconds. 0:17
    We learned that users browse primarily using system 1 thinking, 0:19
    otherwise known as fast thinking. 0:24
    Fast thinking is automatic, instinctive, and emotional. 0:26
    Finally, we learned web users spend far more time scanning than reading. 0:31
    Now that we know these three facts, how do we entice users to stick around? 0:37
    Part of the answer is taking advantage of the navigation patterns we learned in 0:42
    the previous stage. 0:47
    If users can quickly figure out where they are, how to get around, and 0:49
    how to find what they're looking for, that's a tremendous help. 0:53
    However, providing an effective navigation isn't enough to 0:57
    convince users to stay. After all, they're not just 1:01
    keeping an unconscious tally of whether your site is usable and 1:05
    trustworthy. They're also looking for content that matches their interests. 1:09
    In this stage, we'll discuss patterns for laying out page 1:14
    content with a goal of keeping bounce rate to a minimum. 1:17
    Bounce rate is a term describing the percentage of users who visit 1:23
    a web page and leave without taking any action, 1:28
    such as clicking a call to action or viewing another page. 1:32
    An interesting consideration when thinking about the first impression you'd like your 1:36
    website or app to make is a UX principle called the aesthetic usability effect. 1:42
    The aesthetic usability effect states that users often perceive 1:47
    designs that are aesthetically pleasing as being more usable. 1:52
    In fact, users are more willing to tolerate minor 1:57
    usability issues on aesthetically pleasing web pages. 2:01
    But what defines an aesthetically pleasing design? 2:05
    That's a complex question. 2:09
    But since we're concentrating on making a solid first impression, 2:11
    we'll focus our answer on two principles, grid and visual hierarchy. 2:15
    Grids are a series of invisible lines that determine where your content will align. 2:20
    Grids have many benefits in visual design, 2:26
    including assisting developers in creating responsive web content. 2:29
    As far as creating a good first impression goes, however, 2:34
    just remember that neatly aligned content looks cleaner, more professional, 2:37
    and more aesthetically pleasing than content that's poorly aligned. 2:42
    Visual hierarchy means presenting design elements 2:47
    to show their order of importance. 2:50
    Designers will often check visual hierarchy by taking a step back from 2:53
    a design in progress and squinting their eyes or else applying a blur filter. 2:58
    Does the most important content stand out? 3:03
    If not, there are three adjustments you can make to exaggerate your primary 3:06
    content's importance. 3:10
    The first is scale. 3:15
    The largest design element, along with the largest and 3:18
    boldest type tends to draw the most attention. 3:21
    I'm looking at the homepage for Topology Eyewear, and 3:25
    there really isn't much competing for my attention. 3:28
    That's a really big pair of eyeglasses. 3:31
    Then I'll read the text, this is eyewear tailored for you. 3:34
    Topology Eyewear also makes excellent use of white space as both the glasses 3:38
    and the heading are provided with plenty of breathing room. 3:44
    Compare it to Williams Sonoma. 3:48
    While the site uses a number of large photographs, 3:50
    if you squint your eyes you'll see a ton of small text and 3:53
    a lot of similarly sized elements with very little breathing room. 3:57
    Continue scrolling down and you'll see more of the same. 4:01
    A lot of crowded photographs, a lot of heavy type, 4:05
    and nowhere to comfortably rest your eyes. 4:09
    The third principle to consider when improving visual hierarchy is 4:14
    the law of proximity, which states that 4:18
    objects near each other tend to be grouped together conceptually. 4:21
    I'm looking at an article on the law of proximity from a blog by Tubik Studio, 4:26
    and they've provided a sample layout called the big landscape. 4:31
    The layout makes effective use of scale and white space, but in addition, 4:36
    I don't have to read a single word to understand how the page works. 4:41
    My eye is drawn immediately to the main article about Lviv. 4:45
    But I'm also confident which parts of the page form the primary navigation, 4:49
    the sidebar, and the footer, thanks to the way 4:55
    each bit of related content is grouped together. 4:58
    Finally, as you're improving your design's visual hierarchy, 5:02
    make sure the attention-grabbing content tells users a meaningful story. 5:06
    I'm looking at Radio Shack's home page. 5:11
    And while my eye is drawn to the largest text, the gold banner 5:13
    conveys nothing memorable about RadioShack's products and services. 5:18
    Especially since my eye is drawn naturally to the part of the page with the most 5:22
    visual contrast, which in this case is the word “or”. Not terribly meaningful, is it? 5:28
    Coming up, we'll take a more detailed look at how users scan their eyes over your 5:34
    content and what sort of layout patterns best support scanning. 5:39

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up