{"id":90,"date":"2023-10-09T12:58:58","date_gmt":"2023-10-09T12:58:58","guid":{"rendered":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/?p=90"},"modified":"2023-12-14T10:43:41","modified_gmt":"2023-12-14T10:43:41","slug":"design-patterns","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/lectures\/design-patterns\/","title":{"rendered":"Design patterns"},"content":{"rendered":"\n

Website patterns<\/h2>\n\n\n\n

For the beginning of this workshop we looked at different patterns with designing a website and which ones might be more useful than others. <\/p>\n\n\n\n

Z-shaped pattern\u00a0<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

F-shaped pattern\u00a0<\/h3>\n\n\n\n
    \n
  • Nielsen Norman <\/li>\n\n\n\n
  • Using heat maps they could see that people looked in an f-shape <\/li>\n\n\n\n
  • \ufeff\ufeffUsers won’t read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won’t.<\/li>\n\n\n\n
  • \ufeffThe first two paragraphs must state the most important information. There’s some hope that users will actually read this material, though they’ll probably read more of the first paragraph than the second<\/li>\n\n\n\n
  • \ufeff\ufeffStart subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior.<\/li>\n<\/ul>\n\n\n\n

    Layer cake pattern\u00a0<\/h3>\n\n\n\n
      \n
    • Consists of fixations made mostly on the page’s headings and subheadings, with deliberate occasional fixations on the (body) text in between.<\/li>\n\n\n\n
    • In an eyetracking heatmap or gaze plot, this pattern looks roughly like a set of horizontal stripes and blank spaces between them, resembling a layer cake (with cake on a level, then frosting, then cake, and so on).<\/li>\n<\/ul>\n\n\n\n

      Other patterns\u00a0<\/h3>\n\n\n\n
        \n
      • \ufeff\ufeffSpotted pattern consists of skipping big chunks of text and scanning as if looking for something specific, such as a link, digits, a particular word or a set of words with a distinctive shape (such as an address or signature).<\/li>\n\n\n\n
      • \ufeff\ufeffMarking pattern involves keeping the eyes focused in one place as the mouse scrolls or finger swipes the page, like a dancer fixates on an object to keep balance as she twirls.
        Marking happens more on mobile than on desktop.<\/li>\n\n\n\n
      • \ufeff\ufeffBypassing pattern occurs when people deliberately skip the first words of the line when multiple lines of text in a list start all with the same word(s).<\/li>\n\n\n\n
      • \ufeff\ufeffCommitment pattern consists of fixating on almost everything on the page. If people are highly motivated and interested in content, they will read all the text in a paragraph or even an entire page. (Don’t count on this to happen frequently, though. Assume that most users will be scanning.)<\/li>\n<\/ul>\n\n\n\n

        Avoid f-shape pattern\u00a0<\/h3>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        Home page<\/h3>\n\n\n\n
          \n
        • As the main gateway to a website, a homepage acts as an introduction to that business’s brand, product, services, values, who and what it’s for, who to contact,you name it.<\/li>\n\n\n\n
        • It’s meant to set a “first impression,” encompass all that a company has to offer, and direct visitors to learn more throughout different sections of the site.<\/li>\n\n\n\n
        • The first few seconds you spend on a new website or web page are critical.<\/li>\n\n\n\n
        • The Home page has to accommodate, for example:\n
            \n
          • Site identity and mission<\/li>\n\n\n\n
          • Site hierarchy & navigation<\/li>\n\n\n\n
          • Search<\/li>\n\n\n\n
          • Teases<\/li>\n\n\n\n
          • Content promos<\/li>\n\n\n\n
          • Feature promos<\/li>\n\n\n\n
          • Timely content<\/li>\n\n\n\n
          • Deals<\/li>\n\n\n\n
          • Shortcuts<\/li>\n\n\n\n
          • Registration<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

            Navigation\u00a0<\/h3>\n\n\n\n
              \n
            • navigation bar \u2018nab bar\u2019 <\/li>\n\n\n\n
            • Utility navigation <\/li>\n\n\n\n
            • Structural navigation <\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n
                \n
              • Contextual navigation <\/li>\n\n\n\n
              • – Online links are blue <\/li>\n\n\n\n
              • Drop down menus <\/li>\n\n\n\n
              • – can be awful – have too many options <\/li>\n\n\n\n
              • Contextual menu <\/li>\n\n\n\n
              • – right click<\/li>\n\n\n\n
              • Fly out menu <\/li>\n\n\n\n
              • – when menus fly out from a menu <\/li>\n\n\n\n
              • Mega menu <\/li>\n\n\n\n
              • Sequential menu <\/li>\n\n\n\n
              • Accordion menu\/ sub menu (progressive disclosure) <\/li>\n\n\n\n
              • Breadcrumbs \n
                  \n
                • a clickable hierarchy helps you see where you are and retrace your steps <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                    \n
                  • Pagination \n
                      \n
                    • navigation between a sequence of pages of content\u00a0\u00a0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                      Menu icons<\/h3>\n\n\n\n
                      \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

                      Website patterns For the beginning of this workshop we looked at different patterns with designing a website and which ones might be more useful than others. Z-shaped pattern\u00a0 F-shaped pattern\u00a0 Layer cake pattern\u00a0 Other patterns\u00a0 Avoid f-shape pattern\u00a0 Home page Navigation\u00a0 Menu icons<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/90"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":3,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}