Sunday, June 23, 2019

website design - Which of the following options best draws attention to the "buy tickets" action without detracting from the surrounding visual hierarchy?


I'm working on touching up (as much as I'm allowed) some of the design elements for a website. One client requirement is to draw more attention to the "buy tickets" link as this action is one that users take frequently. There are already a lot of other competing actions in this header area and we currently have three possible options for making "buy tickets" more visually prominent (see examples below).


Existing Layout


enter image description here


This is a film festival organization. Personally I think their primary action is, ultimately, selling tickets, so I believe "buy tickets" should be the most prominent element (but there are differing opinions on the client-side). Which option is most usable (i.e., accomplishes the goal of making "buy tickets" more prominent but is balanced with the other functionalities of the header which accommodates the main navigation, newsletter signup, site title, and special global links)?





1. Include in Main Menu


enter image description here


+ first item in main menu is first things users see (in the menu)
+ larger size (compared to existing) also increases noticeability
- confuses navigation (all main menu items are sections, not individual page links)
- perhaps not enough contrast (this action could be considered more important in the hierarchy than the main menu items)




2. Replace Newsletter Signup Button


enter image description here



+ easy to see (moderate contrast)
+ special visual style makes it unique and important
- removes newsletter functionality which client finds useful




3. Special Button Style for Existing Link


enter image description here


+ easy to see (high contrast)
+ prominent position (for most western cultures)
- dominates visual hierarchy (could be distracting being so high contrast)
- might be departing from established design guides?





Are there other possibilities that I'm overlooking, or does one of these options clearly accomplish the client's goal without taking away from the other header elements?



Answer



I guess I am going to be the dissenting vote and vote for option 2 :)


Reasons




  1. People read from left to right and when you structure a site to have a purpose,you ideally want to lead them to a place where the last thing they remember or see is the purpose of the site. In your case,the "Buy TJFF tickets" stands out clearly and it something most users would notice due to its location and prominent size (see the example below)


    enter image description here





  2. The gradient of the color behind the "Buy TJFF tickets" is subtle and something that draws the eyes when reading from left to right.




recommendations:




  1. Repeating Buy TJFF tickets twice might confuse the user and make him wonder about where he needs to really go to buy the tickets. I would recommend removing it from the navigation bar at the start





  2. Include the newsletter functionality link in the top navigation bar right after"Festival FAQS" so that you are again leading the user on to the tickets tab




Some articles for you to read :



  1. “Call To Action” Buttons: Guidelines, Best Practices And Examples

  2. Call to Action Buttons: A Survey of Best Practices


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...