UX/UI의 개념

UX (User Experience) : 사용자가 시스템 혹은 제품을 직,간접적으로 접하면서 느끼는 총제적인 경험

UI (User Interface) : 사용자가 제품 기능을 조작할 수 있도록 돕는 각 기능의 조작툴

① UX는 UI를 포괄하는 개념이다.
② Front-end 개발자는 UX를 염두해두고 디자이너/퍼블리셔와의 협업을 통해 UI를 효과적이면서 향후 유지보수 및 개선이 용이하도록 프로그래밍을 해야 한다.
③ UX 경험이 좋더라도 UI 경험이 좋지 않을 수 있다. 이는 반드시 피해야 한다.
    ⚠️ 제품에 대한 좋은 경험을 갖은 사용자도 "어쩌면" 드롭박스 지연, 렌더링 지연 및 오류 등을 겪었을 수도 있다.

 

출처 : https://suheon7481.wixsite.com/mysite1/ui-ux

참조강의 :

우테코 테코톡 : https://www.youtube.com/watch?v=0fzA1cRxFiU&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC 

WHY? 프론트엔드 개발자가 UX/UI를 신경써야 하는 것일까?

핵심 :  웹의 고도화 : 웹3.0에 들어서서 웹은 단순한 기능만을 제공하지 않고, 복잡한 상호작용이 이뤄지는 공간이 되었다.

디자이너가 웹의 구조와 디자인을 결정한다면, 프론트엔드 개발자는 해당 디자인의 구성을 고민하고 사용자가 즐거운 경험을 가져갈 수 있도록 기능을 설계해야 한다.

HOW?

1. 기존의 경험을 존중한다 : 사용자는 다른 웹에서 얻은 좋은 경험을 현재 사용중인 웹에서도 기대한다. (ex. 나의 학습실 / 강의 노출 등)

2. 인터페이스의 크기가 사용자가 사용하기에 충분히 커야 하며, 인터페이스 사이의 충분한 거리가 확보되어야 한다.

3. 사용자의 의사결정에 영향을 미치는 선택지의 개수와 복잡성을 최소화한다. why? 사용자는 단순한 의사결정에 많은 선택지를 고민하길 원치 않아 한다.

4. 부정적인 경험을 즐거운 경험의 과정으로 장식한다. => 404 오류 페이지의 디자인 + 적절한 오류 메세지와 해결 방법의 제공

5. 중요한 정보와 핵심 동작을 시각적으로 강조한다.

6. 시스템 반응 속도와 유저 경험을 고려한다. => ex) 스켈레톤 스크린 : 사용자는 처리 과정에 대한 피드백이 있을수록 + 사용자가 인지 가능한 수준의 반응이 제공될수록 즐거운 경험을 가져간다.

프론트엔드 개발자가 가장 확실하게 유저 경험을 보장할 수 있는 방법?

=> 최적화! Chrome Lighthouse