AResearch Kit Templates 3 templates for conducting user tests summarizing your UX research and presenting your findings. User Testing Template UX Research Testing Report Template UX Research Presentation Template Download for Free Learn more Horizontal Navigation Best Practices Avoid horizontal scrolling on full webpages. Enable other interaction methods.like vertical scrollbars. Make the horizontal scroll option visually apparent. So you think horizontal navigation has a place on your website Here are some guidelines to keep in mind 1. Avoid horizontal scrolling on full webpages. Horizontal scroll should never replace vertical scrolling on a full web page.
Violating this convention will alienate the majority of users. If you want different sections of your main page to transition horizontally consider triggering a horizontal animation with a vertical scroll as seen on this impressive Digital Marketing Service design agency website Example of Horizontal Animation With Vertical Scroll Image Source In this example the user is scrolling downward. The entrance of media from the right is unexpected at first but you quickly pick up on whats happening. 2. Enable other interaction methods. Even if horizontal scrolling serves your page we recommend giving desktop users another way to reveal hidden content. An arrow button can have the same function Horizontal Scrolling Interaction Method on Google.
Earch Page Image Source Mobile users will experience fewer issues swiping sideways so buttons arent necessary on mobile sites. Still the primary scrolling orientation should stay vertical on touchscreen devices. 3. Design horizontal scrollbars like vertical scrollbars. On desktop horizontal scroll bars should be available within their containers. Horizontal scroll bars should look like and function like their vertical counterparts for design consistency. Avoid custom styling in your scroll bars since they serve to assist and should not steal focus There are a couple of exceptions to placing visible scrollbars. If there are buttons on both sides of the container which allow users to scroll users can click these instead of dragging a scrollbar. Also dont show a scrollbar if the contents of a container loop back to the beginning at the end.
發表於 2023-12-27 12:46:00
