TODO LIST에서의 사용성 향상을 위한 생각
낙관적 업데이트
- 낙관적 업데이트란?
서버와 통신할 때, 서버의 속도가 느릴 때 또는 바로 보여야 할 때 서버의 속도가 느리기 때문에 사용성이 떨어질 수 있다. 이때 서버가 올바른 처리를
해준다는 것을 믿고 클라이언트에서 사용자에게 ui를 보여줄 때에는 바로 보이게 해놓고, 서버에서 작업을 하게 만드는 것이다.
ex) 페이스북 메시지
ex) 인스타그램 라이브 방송 댓글 등
낙관적 UI(Optimistic UI)
낙관적 업데이트에 관한 글을 찾아보다가, 아래의 글을 마주하게 되었다.
궁금했던 "만약 낙관적 업데이트가 실패하면?" 이라는 주제를 포함해 optimistic ui에 대해 자세히 나와있다.
번역 글 : https://story.pxd.co.kr/1193
원글 : https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/
내가 궁금했던 점을 요약해 적어보았다. 원글은 더 자세하게 나와있다!
api가 오류를 일으킬 때 어떻게 대응할 수 있을까?
사용자의 몰입상태안에서, 실패는 최대한 빨리 알려야 한다.
예를 들어, 트위터는 요청이 실패했을 때 아무 소란스러움 없이 미묘하게 좋아요 버튼의 시각적 상태를 되돌린다.
오류 메시지나 알림을 줄 수도 있겠지만, 이럴 경우에는 사용자의 맥락을 깰 수 있다.
사실 좋아요 오류 같은 단순한 액션에 대해서는 과잉이라고 할 수 있다.
따라서 맥락에 따라 대처가 필요하다고 할 수 있다. 중요하다고 생각되는 정보라면 알림을 해줄 수도 있고, 아니라면 단순히 상태를 되돌려 놓는 것으로 충분할지도 모른다.
사용자가 브라우저를 닫아 버리면?
최악의 경우는 사용자가 서버에 요청이 보내지기도 전에 탭을 닫는 경우겠지만 하지만 사용자가 극도로 날렵하지 않는 이상 거의 불가능하다.
성공시 브라우저를 닫는 것은 문제되지 않는다.
문제가 되는 것은 사용자가 서버가 돌아오는 동안 브라우저 닫기 + 실패의 경우일 것이다. 서버가 돌아오는 최대 몇초 동안 탭을 닫는 사용자는 그리 많지 않겠지만,
실패 시 극도로 문제가 될 상황이라면 낙관적 업데이트를 중요하지 않은 요소에만 한정시키는 것이 좋다.
ex) 글 저장 실패
요것도 낙관적 ui와 함께 공부한 ux 개선 사항이다.
사용자가 저장하지 않은 input을 자동저장하는 법
local storage을 이용해 저장한다.
input 값이 바뀔 때 마다 local storage에 저장하면 새로고침될 때도 유지된다.
submit을 할 때 storage에 있는 값을 비워준다.
이렇게 사용성에 관한 부분은 FE 엔지니어로서 고려해야 할 부분이다.
기획서에서는 전체적인 그림만 있기 때문에, FE 엔지니어가 이러한 세세한 부분까지 알고 있어야 한다!😊
