loading...

Introduction to user experience design

ziizium profile image Habdul Hazeez Updated on ・4 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

There is a high chance you've stumbled on a website and you are like — Wow! This is beautiful!, this means the user interface designer did a pretty good job. Then you proceed to use the said website and you are like — Are you kidding me? you are supposed to show me this and not that, you might hasten to close the page and look for a similar website. This means the user experience was not taken into greater consideration.

When we talked about user interface design in the last post, we made it clear that it was about building the user interface for the user, user experience is about making the interface usable and to a greater certain extent enjoyable to the user by meeting certain expectations.

We'll take a general overview of user experience by giving some real-world examples then we'll take about user experience as related to web design and development.


Take a look around you, everything is designed from the railways, parking garage, airports and the buildings. When the user experience is not good for any of the mentioned examples, the user will complain and if they have a choice they will gladly opt for it. In reality, you might not call a building architect or an engineer a user experience designer but, if you take a close look at what they do, you might change your mind.

The next question you might ask is: What is a user experience design and how is it related to UI design? In order to answer this question, we need to know where it all began.

Historically speaking user experience dates back to a pretty long time but we are concerned about its history in web design and development.

The term _ "user experience"_ was coined in a presentation by usability expert Donald Norman in the '90s. Over the years the field of user experience design (abbreviated as UX design) has gained traction in web development and currently, the name is used interchangeably with UI design. Now you might ask: what is the difference?

The difference is quite simple and it goes as thus — If a UI designer designs a beautiful and stunning interface a UX designer ensures the interface is actually usable. That's it.

In application development, both classes of designer work together to ensure the usability of the application. The UX designer has one main job — research. The research includes everything that will make the product (application) a successful one from user testing to competitor analysis (if there is a similar product in the market).

There UX designer also ensures the UI designer follows the recommended guidelines when designing the interface. The guidelines include but not limited to:

  • User control and freedom
  • Error prevention
  • Flexibility and efficiency of use
  • Aesthetics and minimalist design
  • Help and documentation

Let's have a look at some examples.

Take a look at the following mockup:

A website mockup

Most users are used to this layout on their desktop computers which are the website name on the left, the search form on the right with navigation links between them or below. Any designer that deviate from this approach should have a pretty good reason.

Now take a look at the following image which is a big no to usability.

A website mockup

Most internet users access the web from their mobile devices (or smartphone), the UX designer also ensures that the application is designed with this category of users in mind.

Compare the layout given below:

Smartphone layout

The first layout is user-friendly but the second one is not because the user has to click and zoom to click the navigation links.

These examples are some of the basic things that have to be taken into consideration in order to deliver a good user experience.

The application flow is another thing to factor into the equation when you are designing, take for instance you are designing a banking application you should know if a user transfer funds they'll expect to see the Transfer successful or Error in transaction and not a blank screen nor redirection back to the application's homepage.

User experience design is a multi-faceted field comprising of so many things mostly theoretical in nature before the practical application and we've barely scratched the surface here therefore further reading is required. Take a look at the following resources:


Our next topic is another step towards designing a usable and accessible website and that is web usability and accessibility.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide