UI 디자인 가이드 : 로딩 상태 표시 버튼

출처: https://brunch.co.kr/@august9/279

버튼의 로딩 상태 표시하기

When You Need to Show a Button’s Loading State

우리가 사용하는 버튼에는 활성화(enabled) 및 비활성화(disabled) 상태 외에 로드(loading) 상태도 존재할 수 있습니다. 보통은 작업이 몇 초 이내에 완료되기 때문에 일반적인 네트워크 상황에서 버튼 로딩 상태가 사용자에게 표시되지 않는 경우가 많지만 네트워크에 문제가 있거나 기타의 이유로 평소보다 더 많은 시간이 걸리는 경우 사용자에게 상태에 대한 어포던스를 제공하지 않는다면 에러 발생 확률이 높아집니다.

 

Action Errors(사용자 액션 오류)

사용자는 작업이 완료되는 데 예상보다 오랜 시간이 걸리는 경우 시스템이 요청 처리중임을 인지해야합니다. 

시스템에 아무 변화가 없다면, 버튼을 제대로 누르지 않았다고 생각해서 버튼을 재차 누를 수 있습니다.

사용자가 같은 버튼을 두 번 이상 누르면 시스템 처리 시에도 부하가 증가할 뿐만 아니라 작업이 중복처리될 수 있어서 상황에 따라서는 이 행동이 사용자뿐만 아니라 시스템에도 심각한 오류를 가져올 수 있습니다.

예를 들어, 이런 문제가 생길 수 있습니다. 

사용자가 실수로 반복적인 메시지를 보내거나 

양식을 여러 번 제출하거나 

동일한 제품을 두 번 주문하는 일처럼요.

이런 액션 오류는 결국 추가 데이터를 생성하게됩니다. 

그리고 해당 데이터를 정리하는 데 때로는 시간과 비용이 들 수 있습니다.

 

Progress Buttons(진행 상태 버튼)

이런 오류들을 예방하기 위해 2초 이상 걸리는 작업에는 진행 상태 표시 버튼을 사용해야 합니다. 

한 연구 조사에 따르면 사용자는 페이지가 2초 이하로 로드될 것으로 예상하고 시간이 더 걸리면 참을성이 없어진다고 합니다.

아래 보이는 Progress Button은 사용자에게 로딩 상태를 나타내는 시각적 신호를 제공합니다. 

인식을 통해 사용자가 프로세스가 진행되는 것을 볼 수 있고 버튼을 다시 누를 가능성이 줄어듭니다. 

버튼이 진행중 상태일 때에는 버튼 상태를 비활성화하여 다른 작업 오류가 발생하지 않도록 하는 것 또한 중요합니다.

 

 

버튼의 로딩 상태는 버튼의 내부에 보여주는 것이 좋습니다. 물론 버튼의 로딩 상태를 버튼 외부에 표시할 수도 있겠지만 사용자가 버튼을 누를 때에는 이미 버튼을 보고 있는 상태이기 때문입니다. 버튼 내부의 상태 표시는 사용자의 시야에 한 번에 들어오는 효과가 있습니다. 기타 다른 영역에 존재하는  상태 표시는 사용자가 시선을 옮겨서 찾아야 해서 쉽게 인식하기 어려울 수도 있습니다.

 

Progress Button 설계 시 참고할 사항

Progress button(진행 상태 표시 버튼)은 구현이 쉽고 일관된 스타일을 가져야 합니다. 사용자가 로딩 상태를 쉽게 인식할 수 있고 버튼이 시각적으로도 다른 요소들과 충돌하지 않도록합니다.

Progress indicator(진행률 표시기)를 추가할 경우 버튼 크기를 늘이지 않도록하세요.

버튼에 별도의 배경색을 적용하지 않습니다. 대신 투명도를 조절하여 사용하는 방법으로 비활성화 상태를 표시할 수 있습니다.

진행 상태 표시기는 사용자의 눈에 띄도록 고대비 색상을 사용하는 것을 추천합니다.

 

 

Progress button(진행률 표시기)의 버튼 레이블을 숨기지 마세요. 사용자가 항상 진행 상황을 알 수 있어야 합니다.

원형 타입의 표시기와 라벨을 함께 배치할 수 있는 스페이스가 부족하다면, 원형 대신 선형 진행 표시기를 사용해도 됩니다. 이 타입은 버튼 레이블을 계속 표시하면서 버튼 내부의 진행 상황을 표시할 수 있는 장점이 있으며, 모서리가 뾰족한 경우에는 버튼의 위쪽 보더 영역으로 진행 상황을 표시할 수도 있습니다.

사용자에게 진행 상황을 더 잘 알리기 위해 상태에 따라 버튼 레이블을 변경하여 시스템이 수행하는 작업을 설명할 수도 있습니다. 예를 들어 원래 레이블을 "제출"에서 "제출 중..."으로 변경해서 표시해주면, 사용자는 기다리는 동안 무슨 일이 일어나고 있는지 인지하기 쉬워집니다. 단, 버튼이 더 긴 레이블을 담을 만큼 충분히 넓지 않은 경우에는 적용하기 힘들 수 있습니다.

 

 

2초 규칙을 잊지 말고 따르세요.

로딩 상태는 대부분의 디자이너가 버튼을 디자인할 때 고려하는 것과 다를 수 있습니다. 

그렇기 때문에 작업을 완료하는 데 2초 이상 걸리는 경우 사용자에게 로드 상태를 표시하는 것이 중요합니다. Progress buttons(진행 상태 버튼)은 이를 위한 컨트롤입니다. 사용자로 하여금 행동 오류가 일어나지 않게 진행 상태 표시 버튼을 적용하세요. 

일 잘하는 혹은 경험많은 PO는 수많은 예외를 고려해서 먼저 제안할 수 있어야 한다고 합니다.

프로젝트는 최소한의 리소스를 사용해 최소한의 리스크를 발생시키는 걸 염두해야하니까요.

하지만 실제로 프로젝트를 진행하다 보면, 예기치 않은 예외 상황들이 발생하는 경우가 생기죠.

설계 혹은 디자인 단계에서 미리 예측 가능하도록 기술적인 제약사항까지도 완벽히 안다면 더할나위 없기 좋을테지만, 현실은 그렇지 않죠. 실제 테스트 상황이 아니라면 알 수 없을 오류들도 많기 때문에 리스크를 줄이려면 협업과 커뮤니케이션이 점점 더 중요해지는 것 같다는 생각이 듭니다.

* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.

When You Need to Show a Button’s Loading State

Buttons have more than an enabled and disabled state. They also have a loading state. The loading state isn't usually shown to users because most actions happen within seconds. But for operations that take longer than usual to occur, not showing the loadin

uxmovement.com

When You Need to Show a Button’s Loading State