Web Design #10 - User Experience (UX)

Jun's Coding Journey·2022년 10월 27일
0

[Learn] HTML / CSS

목록 보기
21/30

Difference Between UI and UX?

UI and UX are familiar terms that people have heard often in various settings. But, what exactly do they mean? User Interface (UI) is the visual presentation of a product, or rather, how the overall product looks and feels like. User Experience (UX) is the overall experience the user has while interacting with the product.

UI is graphical interface that makes the overall product look and feel beautiful and aesthetic. On the other hand, UX is the experience that makes the interface useful and functional. Overall, UX design cannot exist without UI design and vice versa!

To better understand the two terms, we could take the anology of various kinds of bottles. All the different shapes of bottle serve the same purpose regardless of their different shapes. Additionally, all of them have their own unique design that looks aesthetic to the eye. However, depending on the setting they are used, some bottle may be more useful than others.

UX Rules

  • Don't design complicated layouts. Use patterns that users know. You do not always have to make something unique. It is okay to apply existing designs.

  • Make sure to give more attention to your most prominent element.

  • Use colored text and underlined text only for links.

  • Animations should have a purpose and be fast. Be careful not to spend too much time.

  • In forms, align labels and fields in a single vertical line to make the form easier to read.

  • Offer users good feedback for all actions: form errors, form success, etc.

  • Place action buttons where they will create an effect.

  • Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! Make sure the headline looks strong.

  • Only include relevant information efficiently. Make the content 100% clear.

  • Use simple words! Avoid technical jargon and "smart-sounding" words.

  • Break up long text with sub-headings, images, block-quotes, bullet points, etc.

profile
Greatness From Small Beginnings

0개의 댓글