{"id":15825,"date":"2014-07-24T06:00:13","date_gmt":"2014-07-24T13:00:13","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=15825"},"modified":"2024-03-28T05:26:50","modified_gmt":"2024-03-28T12:26:50","slug":"ux-tips-why-transitions-matter","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter","title":{"rendered":"UX Tips: Why Transitions Matter"},"content":{"rendered":"

It’s tempting to think of your site design in terms of static pages. After all, that’s where users spend the most time as they browse your site. It’s what grabs their attention. You know you need a great homepage. Your “about†page really has to sparkle so users can remember you and your business. Your contact information has to be complete and easy to understand. Product pages need to be detailed and have excellent photography. The site’s layout has to be clean but compelling.<\/p>\n

That’s all good, but a great UX means that every detail counts. Whether users are browsing via desktop or mobile, they want a seamless, hassle-free experience throughout their site visit. Transitions are one place web designers can forget that. Thinking them through and making them part of the site design is more than a nice idea–it can be the difference between conversion or losing visitors. Here’s why…<\/p>\n

<\/span>Short User Attention Span<\/span><\/h2>\n

Users get frustrated quickly and easily if a site doesn’t work like they expect it to. Long delays in loading or transitions that won’t load properly will have them going back to Google. So, make sure any transitions are fast and efficient. It’s worth the time it takes to test them on multiple browsers and mobile to make sure they work equally well across platforms.<\/p>\n

<\/span>Every Transition Can Show Your Brand<\/span><\/h2>\n

You can look at transitions as a necessary evil. Or, you can look at them as a chance to polish off your brand statement. Giving transitions flair and personality (as long as it doesn’t affect their performance) can help give users a more immersive flavor. Think about adding a cool graphic to your loading page. Or, add a non-generic message to the screen that fits with your site’s personality.<\/p>\n

<\/span>Transitions Can Add a Custom Feel<\/span><\/h2>\n

The sheer number of great website templates out there means you can have a great-looking website out of the box. While that’s great for convenience and ease of design, it can also make it much harder to stand out from the crowd of your client’s competitors, many of whom may well have similar-looking sites. Small transition details–a button that looks “clicked†when you press it or a page that can be turned–can help enrich the UX and make your site more memorable.<\/p>\n

<\/span>Transitions Can Highlight Important Page Elements<\/span><\/h2>\n

Adding a transition detail to a call-to-action button or another actionable item can help draw users’ attention to it. That’s especially important if your site is trying to sell a product or service. Seeing something changing on the screen as they scroll around encourages users to linger over that part of the page.<\/p>\n

<\/span>Using Transitions Can Make the Site Easier to Use<\/span><\/h2>\n

As counterintuitive as it might sound, good transitions can help a site work better. Simple effects, like items that expand when moused over, can help you comfortably fit more content onto the page. Overall, transitions that allow users to better see what their mouse is hovering over can help aid legibility.<\/p>\n

<\/span>Get The Little Things Right<\/span><\/h2>\n

These are just a few reasons why it’s crucial to put as much effort into transitions as you do into any other element of your website design. Remember, users are pickier than ever about what they think makes a good site. Expectations have to be met and exceeded to retain their interest.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

It’s tempting to think of your site design in terms of static pages. After all, that’s where users spend the most time as they browse your site. It’s what grabs their attention. You know you need a great homepage. Your “about†page really has to sparkle so users can remember you and your business. Your […]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[59],"tags":[719,840,460],"topics":[],"class_list":["post-15825","post","type-post","status-publish","format-standard","hentry","category-design-trends","tag-ux","tag-transitions","tag-ui"],"acf":[],"yoast_head":"\nUX Tips: Why Transitions Matter - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Tips: Why Transitions Matter\" \/>\n<meta property=\"og:description\" content=\"It’s tempting to think of your site design in terms of static pages. After all, that’s where users spend the most\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-24T13:00:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-28T12:26:50+00:00\" \/>\n<meta name=\"author\" content=\"Creative Market\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creative Market\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/ux-tips-why-transitions-matter\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/ux-tips-why-transitions-matter\",\"name\":\"UX Tips: Why Transitions Matter - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"datePublished\":\"2014-07-24T13:00:13+00:00\",\"dateModified\":\"2024-03-28T12:26:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d6927fab89f28e3dd8f6bb7b36219d66\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/ux-tips-why-transitions-matter#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/ux-tips-why-transitions-matter\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/ux-tips-why-transitions-matter#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Tips: Why Transitions Matter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UX Tips: Why Transitions Matter - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter","og_locale":"en_US","og_type":"article","og_title":"UX Tips: Why Transitions Matter","og_description":"It’s tempting to think of your site design in terms of static pages. After all, that’s where users spend the most","og_url":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-07-24T13:00:13+00:00","article_modified_time":"2024-03-28T12:26:50+00:00","author":"Creative Market","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Creative Market","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter","url":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter","name":"UX Tips: Why Transitions Matter - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"datePublished":"2014-07-24T13:00:13+00:00","dateModified":"2024-03-28T12:26:50+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d6927fab89f28e3dd8f6bb7b36219d66"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/ux-tips-why-transitions-matter#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UX Tips: Why Transitions Matter"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/15825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=15825"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/15825\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=15825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=15825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=15825"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=15825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}