Creating an Engaging Responsive Website and a User Interface for a University Online Portal

Over the last 5 years, there has been an exponential shift from people using large screen desktop PCs and laptops to smartphones, tablets and Ultrabooks. In fact, during the month of January in 2014, Internet usage on mobile devices actually exceeded PC usage for the first time in history. This is something that Universities must take into account when implementing both an Online Portal and a Responsive Website.

This shift has revolutionised the current state of the World Wide Web in terms of design as the importance of having a responsive website that naturally adapts to the type of device it is being displayed on, has become a fundamental requirement for all websites created today.

Responsive design is especially important for University online portals as students are actually at the forefront of this shift. Here are 5 things to consider when you create your first responsive online portal or website:

  • Clutter Free, Clean and Modern design
  • Minimise page navigation and clicks
  • Engage customers
  • Aim for speed and ease of use
  • Provide clear feedback to the user


Clear Design

Arguably the most important aspect of a clean modern website is to keep it clutter free, focusing on the content by removing everything that is not completely necessary. This can be text, images or even chrome (borders, gradients etc.).

It is always important to keep users engaged and eliminate any potential frustration in order to keep them on your site. The use of clear typography goes a long way towards ensuring your site is easily readable and accessible. Maximise content discovery by bringing the important information to the forefront and minimise the need to search.


Intuitive Design

Ease of use is fundamental to a well design website, every process and every action must be easy to understand whilst being completely learnable. Make your pages consistent in user interface elements as well as font faces, icons and sizes.

Button positioning and colouring should be consistently placed and displayed clearly to the user. Try to position important text and actionable elements in areas that do not require any scrolling (make them visible when the page first loads).


Engaging Design

Everyone loves a site that is quick, engaging and unobtrusive. Engage users by eliminating things that users find frustrating such as requesting for an email twice on a web form. There is simply no need to request for an email twice as most users will just copy the email address they initially typed and paste it into the second input box.

Date selection is another area that does not usually get enough thought. You will usually find two types of date selection techniques across most web forms:

  1. 3 column dropdown lists – These are arguably the fastest and most unobtrusive way on entering a date. Use this when the day of the week is not important e.g. for a date of birth field.
  2. Date Calendar popup – This is a slower solution but does give a clear view of the day of the week. Use this when the day of the week is helpful or important e.g. for selecting date of an appointment.


Efficient Design

With the rapid shift towards mobile devices, a new limitation has been introduced in the form of data allowance, where mobile providers restrict data usage for their users each month. This is very important because the data allowance for people on entry level contracts can be as little as 50MB per month.

With these new restrictions, a media heavy website with un-optimised videos and images can eat through a user’s data allowance on a single site visit. Your website should be light weight by optimising or removing the images and videos on display when your website is viewed on a smartphone or tablet.


Interactive Design

We all like to know what happens when we click on buttons on a website, whether it is a ‘Success’ page/popup that is displayed to tell you whether an order has gone through or an ‘Alert/Warning’ that highlights mandatory fields that you may have missed.

Providing visual feedback such as progress bars for various actions is a great way to let the user know that something is happening or has happened especially for users with limited internet connectivity. The use of animation when hovering over buttons for example is a great way of showing users which elements they can interact with.