Front-end developer essentials – User interface design

This is the first in a series that should form the building blocks to being a good all-round front-end developer. If you peruse the current job market you will see that there is so much more than knowing how to code HTML, CSS and Javascript.

I’m going to start with ideas that should be thought about before any code is written such as user interface design, accessibility and web standards. Then I’ll move on to the more technical bits like document type definition, jQuery efficiency, HTML5 and AJAX.

UI design or user-centred design

UI design is about developing your site or application with the user’s experience driving requirements, to ensure they can accomplish their goals as efficiently and simply as possible. When done right you will reduce the number of excessive functions that have no benefit to the user.

Development process

  1. Gather requirements for the application – things the system needs to do.
  2. Analysis of the users – have conversations with the users of the end product to see how they work and what systems they’re used to.
  3. Information architecture – figure out the information flow of the system.
  4. Prototyping – make a simple working prototype that can be used to test functionality rather than aesthetics.
  5. Usability testing – put the prototypes in front of the end users and record their experience and thoughts.
  6. Look and feel – adding the graphical user interface. This step’s output should also feed into user testing.

Design thoughts

  • Ensure consistency within your application.
  • Adhere to design principles (patterns):

    “…users spend most of their time on other websites.”

    Jakob’s Law of the Web User Experience

  • Error prevention – help the user get it right before submission.
  • Provide feedback at all stages.
  • Think about providing default values for inputs.
  • Use a language familiar to the user.

Further reading

UI patterns

40 helpful resources on user interface design patterns

Ultimate guide to table UI patterns

30 essential controls

CSS bake

Top 10 application-design mistakes

Add your comment

Your email address will not be published. Required fields are marked *