There are quite a few user experience mistakes during the building phase for a range of devices. These are mainly due to still thinking from a desktop point of view, when information can easily be related and arranged to guide users
through the online experience, or it’s because the design and build has become too focused on what is technically possible and lost sight of what
would be best for the user. It goes without saying that the navigation
of a website is vital and problems here are normally caused by the navigation being The BBC iPlayer website has undergone substantial development over the past year. This seems to been more of an evolution than a rebuild, and this
approach has led to a very well-considered solution. The navigation is separated into two, one for global BBC sites and one for navigatingwithin the iPlayer. This approach enables users to switch between a range of BBC sites
seamlessly and reduces the amount of navigation items required within the iPlayer navigation itself. Instead of showing everything in a collapsible menu as the screen gets smaller, the iPlayer navigation keeps the key items
immediately available, and even on small screens the channel menu remains.
The slider section is available on larger screen sizes including some tablets, it uses draggable touch interactions as well as hover interactions when using a mouse. This is an excellent example of the UI that considers specific input and
method support of the device or browser being used.
New interface, new experience complicated on desktop layout, and in turn being extremely difficult to support on smaller screens. It is standard practice to switch the main navigation to a collapsible menu, but it is a good idea to keep the most popular top-level links visible for as long as possible. If the website has multiple levels of navigation, a slide-in menu works well and you can leverage swipe interactions to make it easy to use.
Make sure that a navigation menu containing lots of images that takes up more than the screen area is avoided. This ensures that users can always exit the navigation easily. Additionally it is important to keep any navigation icons
aligned with best practice symbols as much as possible for user familiarity. It can be infuriating for users when there is an interactive element such as a slider that isn’t draggable on a touch screen. Instead of relying on button controls to move information around within the UI, make sure touch interactions are used on the UI elements themselves.
This is much more intuitive for users and is always the first thing they will try. Any elements that have click events bound to them should use a touch event
when available (for example touchend). When a click event is triggered on a touch screen the following events are fired in order: touchstart, touchmove, touchend and click. The time diff erence between touchend and click can be as much as 300ms – this may seem small, but within a UI it makes a huge difference in how responsive the UI feels when using it. When using a desktop computer, a form with many fields is easy to digest due to the space permitted by the screen size. As screens get smaller, forms can get unwieldy and difficult. This will impact conversion rates of your forms, which are core business drivers of websites. To alleviate these problems forms should be broken down into smaller, logical sections and the progress through the form indicated to set the expectation with the user. Additional enhancements, such as field prompting and location lookups, can make the process easier.