Product Management 101: User Interface (UI) and User Experience (UX)

User interface (UI) and user experience (UX) are two related (but not identical) concepts that every product person needs to have a working knowledge of. Below, we’ll go through the basics of each and discuss the differences between the two.

ユーザーインターフェイスとは

ユーザーインターフェイス（UI）は、あらゆるアプリケーションまたはウェブサイトの「顔」です。これは、ソフトウェアの全体的な視覚的構成と、ソフトウェアのあらゆる部分がユーザーにどのように伝達されるかを決定するものです。UIは、次の3つの主要なカテゴリで構成されます。

Layout

The UI layout is the overall look and feel of an app or website, including the structure and spacing of each screen and relationship between components on the screen, the general placement of core components to create and define the frame within the screen, the overall design language that is used to lend the software an identity, transitions between pages and components, and the colors, shapes, fonts, and perspectives that contribute to a cohesive brand.

Elements

UI elements are the parts of the app or website that make it interactive. Common elements include buttons, sliders, dropdown lists, and text fields. More recently, physical gestures have become core elements of the UI, especially for mobile apps.

Graphics

Within the UI, graphics are visuals that narrate the frame, screen, or element. Examples of graphics are illustrations, images, animations, videos, and photographs.

ユーザー体験（UX）とは

ユーザー体験（UX）とは、ユーザーのニーズに応え、ユーザーが簡単かつ直感的に操作でき、素早く価値を得られるようなプロダクトを作ることです。ユーザー体験とは、文字通り、ユーザーがプロダクトをどのように体験するかということでもあります。

ユーザーインターフェイス（UI）とユーザー体験（UX）の設計の比較

UIとUXの設計分野は異なりますが、同じように使われたり、ソフトウェアUI/UXデザインの単一の分野としてまとめられたりすることがよくあります。この2つを組み合わせたり、混同したりする傾向は、主にユーザーを重視した結果であり、それぞれのタイプの設計におけるスキルや実践を重視したものではありません。

ユーザーがアプリケーションやウェブサイトを操作する背景から、パッケージのようなものであるUIとUXは本質的にリンクしており、どちらか一方が欠けても成立しないものとなっています。しかし、この2つの分野は最終的に、別々の目標に焦点を当てています。UIが主に芸術的な技術であるのに対して、UXはユーザー行動を重視します。

UIデザインについて

ソフトウェアの世界では、ユーザーインターフェイスデザイナーはグラフィックデザイナーとしても知られています。UIデザイナーは、アプリやウェブサイトの美観をレイアウトや要素、画像として考案し、実現します。プロダクト開発というよりも広範なワークフローにおいて、UIデザイナーはアプリやウェブサイトに組み込まれるアートや、機能やプロダクトのプロトタイプを構築することに重点を置いています。

UXデザインについて

User experience designers set out to optimize the interactions of the user against the backdrop of the UI. They test, experiment with, and gather insights and feedback on the user’s behaviors with the layout, elements, and images of the app or website, both in the context of the prototype and in the live software. UX designers focus on the user’s operational approach to the interface and how well or poorly those interactions generate a low-friction, high-engagement experience for the user.

UIデザイナーとUXデザイナーの協働のあり方

プロトタイプでユーザーインターフェイスが大まかに定義されると、UXデザイナーは、改善に向けてUIデザイナーを導く方法を検討し始めます。その設計は使いやすいか？ユーザーが効率的に操作できるようになっているか？ユーザーの目的は一貫しているか、それとも変化しているか？どのような変更を加えれば、より良いフローを生み出せるか？UXデザイナーが実施したテストや実験から得たインサイトや提案をもとに、UIデザイナーはインターフェイスを効果的にアップデートし、プロダクトの意図を反映したアートに仕上げることができます。

How do UI and UX differ in practice?

UIデザイナーの仕事は、プロダクトや機能のインターフェイスがエンジニアに渡された時点でほぼ完了します。一方UXデザイナーは、プロダクトや機能が開発され、さらにテストされ、本番稼動した時点では、ゴールの途中までしか到達していません。アプリやウェブサイトの最適化の条件はコンテキストに大きく依存するため、UXはユーザーの操作に対してより包括的なアプローチを取る必要があります。

By gathering product and user analytics data, designing experiments, and conducting research, the UX designer’s process remains iterative based on considerations like device type, user segment, geography, and demographics. UX takes its insights back to UI for interface design changes that are meant to improve the art relative to key user behavior metrics. Although the UI designer must remain a steward for the consistency of look and feel as part of product’s brand continuity, the UX designer is constantly looking for iterations that may lead to better interactions and greater usability.

Recommended reading

Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)by Steve Krug

Think all must-read UX resources are dry and technical? Think again. This comprehensive yet wry book explains the basics of UX and user research and offers practical strategies for making your UI/UX so intuitive, your users don’t even have to think.

Quantifying the User Experience: Practical Statistics for User Research (2nd Edition) byJeff Sauro and James Lewis

Now we’re moving into the real nitty-gritty: math. Learn how to quantify where your user experience is working and where it’s not and how to back up your decisions with data.

“The PB&J of UX and Product” by Amanda Varney

UX and product can be a dream team. This article discusses just a few of the many benefits a strong relationship between UX and product can provide.

“The Ultimate Guide to UX Research Strategy” by Carrie Boyd

This step-by-step breakdown of the what, why, and who of UX research is an easy-to-read reference for both novice and seasoned UI/UX professionals.

“Delivering Better Products Using a Design Thinking Framework” by Leo Frishberg

It’s no secret that product, UX, and engineering sometimes struggle to communicate and collaborate effectively. This post explores one theory on why that is.

“Digging Into a Design Thinking Playbook” by Leo Frishberg

Running into roadblocks between PM and UX? Meet the four Mega-plays: problem validation, concept visioning, epic definition, and feature delivery. A companion piece to the article above.

“Usability Mistakes: Six Honest and Valuable Tips From a UX Designer” by Sándor Zelenka

Building a great user experience isn’t easy, and the process is full of pitfalls, including these six common UX mistakes.