Evolutions in Modern User Interface Design

 
 

As a website and app developer, it’s my job to stay ahead of changes in technology and design. The two are truly intertwined. More and more, I see that design changes are the product of evolving technology. Change happens because of the way we interact with digital media – not because of changes in taste or trends.

Keeping that in mind, here are some important best practices for user interface (UI) design, along with some examples.

 

Designing and developing with mobile at the forefront

Perhaps the most natural evolution is in our thinking about mobile. A few years ago, it seems like everyone was talking about the “mobile web” and trying to cram a full-size design onto a tiny screen. Today, mobile is the web. When designing and building sites, we always keep in mind how the user will need/want to interact with it on a mobile device. That means we assume that the web is being delivered on a small, handheld device rather than a big monitor.

The impacts of this evolution are wide ranging. Perhaps the most visible impact is that things like buttons and menus are bigger. That makes a site easy to see and interact with, especially when using a mobile phone or other handheld device.

 

More flexible canvas

The desire to make websites fit different screen sizes and be responsive pushed for and produced new tools such as HTML5 and CSS3. Because we have these new tools at our disposal, we are filling the canvas in a different way. In the past, everything on the page was fixed width and static. The site would not change with the window or device size. Today, everything on the page is meant to rearrange and fill the space available.

The new additions to the HTML and CSS specifications also allow for better features and user interactivity, as well as better performance. For example, I have the option to make more search results show up when the user reaches the bottom of the page (AJAX loading) rather than making the user click to see more results (pagination).

 

More user feedback mechanisms

We are seeing a lot more use of feedback mechanisms in the user interface. These mechanisms give users a confirmation that they’ve done something – a reaction to their action. 

For example, say I make the mobile navigation slide in, rather than pop up. This use of animation helps users understand where they are, how they got there, and how to get back – which creates a better user experience. That’s why I really like this UI best practice. It’s not just eye candy; it provides for a better experience, too.

 

Common/shared user interface paradigms

App design and development are reaching a state of maturity where we have certain standard paradigms, just like with website design. For example, Google has set some best practices for Android such as:

  •  Use a pull-out menu on the left for inter-app navigation
  • Ensure that another button doesn’t compete with or be easily confused with the up/back button at the top left
  • Put the “three dots” menu at the top right if you need an overflow menu
  • Use paginated tabs so users know where they are and how to go back

There are similar standards for iPhone, and some of the standards cross over from one operating system to another. This continuing evolution will help improve mobile user experience by creating a more consistent paradigm across operating systems and devices.