Blog

  • 6. 가시성: 사용성 좋은 디자인의 10가지 법칙

    6. 가시성: 사용성 좋은 디자인의 10가지 법칙

    어떠한 물체가 보이거나 인정되지 않는다면, 그것은 간단한 존재하지 않는 것이다. 좀 더 직설적으로 말하자면, 링크가 링크로 인지되지 않으면, 대중들은 그것을 클릭하지 않을 것이고, 옵션이 누군가에 의해 인지되지 않으면, 그것은 존재하지 않는 것이라고 보면 된다.


    가시성을 잃어버리게 되는 네 가지 경우

    1. 사람들이 찾는 곳에서 필요한 정보를 이용할 수 없을 때
    2. 필요한 정보가 다른 무언가에 의해 물리적으로 차단되어 있을 때
    3. 심지어 필요한 정보가 잘 보이는 곳에 있더라도 인식되지 않을 때
    4. 그냥 필요한 정보 자체가 존재하지 않을 때

    사람들이 스크롤을 하고 있다!

    대다수의 디자인팀은 사람들이 스크롤을 하지 않는다고 생각할 것이다. 하지만 1996년부터 이어져 온 연구 결과를 보면 ‘사람들은 분명히 스크롤을 한다!’ 대개 한 페이지에서 최소한 50% 정도를 스크롤한다.

    접히는 부분을 정확히 보여줄 수 없는 이유

    • 접히는 면의 위치는 브라우저 창의 크기에 따라 달라진다.
    • 큰 스크린에서 브라우저 창을 최대화하면 어떠한 페이지든 많이 볼 수 있겠지만, 창을 작게 하면 그만큼 적게 보일 것이다. 그리고 스마트폰이나 넷북에서는 일반 컴퓨터 모니터의 크기보다 보이는 부분이 항상 작을 수밖에 없다.
    • 새로운 툴바가 열릴 때마다 접히는 면은 점점 페이지의 위쪽으로 올라가게 된다.
    • 툴바는 브라우저 창의 맨 위에 보이는 여러 가지 도움 되는 기능 아이콘들이 있는 줄이다. 여기서 인쇄하기나 저장하기 등 다양한 기능을 빠르게 수행할 수 있지만, 이 툴바가 많이 열려 있을수록 브라우저 창은 공간을 더욱 많이 차지하게 되며, 그에 따라 웹페이지는 더욱 아래 공간으로 밀릴 수밖에 없고, 이것이 접히는 면을 원래보다 위쪽에 오도록 만든다.
    • 화면의 해상도가 낮을수록 접힌 면은 더 위쪽에 형성된다.
    • 화면의 해상도는 브라우저 창에서 보이는 것을 엄청나게 바꿀 수 있다. 오늘날에는 표준 해상도가 1024X768 픽셀인 것이 일반적이지만, 시력이 좋지 않은 사람들은 해상도를 그보다 훨씬 낮게, 보통 800X600으로 설정하곤 한다. 이것이 브라우저 창에 표시되는 정보의 양을 줄이기도 한다.

    접힌 면이 중요할 때

    반드시 접힌 면에 있어야 할 것들

    • 브랜딩과 메인 메뉴
    • 고객센터의 연락처 정보
    • 페이지 내 검색창
    • 장바구니와 결제 링크
    • 연락처 링크
    • 언어 변경 기능
    • 신속한 애플리케이션의 주요 입력창
    • 주요 결과물 영역

    페이지 가장 하단에 배치해도 문제가 없는 것들

    • 법적 공지
    • 개인정보 보호 정책
    • 실제 주소와 전화번호

    접힌 면이 중요하지 않을 때

    1. 접힌 면을 정확히 찾아내는 것은 불가능하다. 당신이 아무리 훌륭한 예상을 한다고 해도, 방문자의 약 10% 정도만 만족시킬 수 있을 것이다.
    2. 홈페이지는 ‘스크롤 친화적’으로 만들어야 한다. 그러면 페이지 윗부분에 가능한 한 많은 정보를 집어넣으려고 애쓰지 않아도 된다.
    3. 여러분은 자신의 광고를 접힌 면 위에 배치해야 한다고 주장 한느 광고업자들을 많이 만나게 될 것이다. 그러나 사실 만약 페이지가 스크롤하기 좋은 데다 흥미로운 콘텐츠를 제공한다면, 긴 페이지의 하단에 있는 광고는 실제로 상단의 비싼 배너광고만큼 좋거나 혹은 더 나인 클릭 효과를 낼 수 있다.

    스크롤 친화적 페이지 제작하기

    스크롤 친화적인 환경을 만드는 요령은 하나는 그래픽적으로 따분한 곳의 내용을 잘라내 버리는 것이다. 보통 웹페이지 아래쪽 가장자리가 깔끔해 보일수록 스크롤 친화력은 더 떨어지는 경향이 있다.

    불친절한 스크롤 친화적 페이지

    1. 만약 화면에 어떠한 변화가 있다면 당신은 방문자들이 그것을 알아채기를 바랄 것이다. 하지만 이 변화가 ‘화면 바깥’, 즉 보이지 않는 곳에서 일어난다면 방문자들은 변화가 실제로 있었는지 알아챌 수 없을 것이므로 똑같은 정보를 계속 다시 제출했다가 포기하고 싶어질 것이다. 이는 내가 전에 언급했던 피드백 문제와 밀접한 연관이 있지만, 이 상황에서는 피드백이 없는 것은 아니다. 단지 피드백이 어디에 있는지 보이지 않을 뿐이다.
    2. 스크롤 친화적인 페이지가 구축되어 있다 하더라도, 당신은 방문자들이 필요 이상으로 스크롤하는 것은 원하지 않을 것이다. 제출 버튼이 화면에서 살짝 벗어나 있는 것 때문에 스크롤을 아주 조금씩 내려야 하는 것은 엄청나게 짜증 나는 일이다. 스크린이 작아질수록 점점 더 많은, 입력창, 출력 창 등이 아마도 페이지의 상단과 하단에서 모두 반복되어야 할 필요가 있다고 유추할 수 있다.

    스크롤, 메뉴 길이 그리고 모바일 폰

    만약 당신이 어떠한 이유로든 사용자가 스크롤을 하도록 만들기 위해서는, 확실한 시각적 단서를 제공하라! 만약 작은 스크린을 사용할 때 볼 수 있는 메뉴 항목의 수가 제한되어 있다면 특정 범주의 총 메뉴 항목 수를 스크롤하지 않고 화면에 표시할 수 있는 개수까지로 제한 한느 것이 좋다. 사용자들이 스크롤을 하지 않는 것이 아니라, 스크롤해야 한다는 사실을 몰라서 안 할 뿐이다.

    중요한 것을 광고처럼 보이게 만들지 마라

    광고업체들은 광고를 콘텐츠처럼 만들어 사람들이 이를 클릭하게 만드는 다양한 트릭들을 개발해왔다. 이런 것은 실제로 효과가 있다. 그러므로 그 반대의 효과도 가능하다는 사실에 놀라지 마라. 만약 사용자들이 당신의 콘텐츠를 읽고 사용하기를 원한다면, 그 콘텐츠를 광고나 상황별 메뉴, 또는 완전히 새롭고 전혀 원하지 않은 방향으로 내모는 것처럼 보이는 어떤 것으로 만들지 마라.

    맛보기 서비스의 함정

    사용성 비즈니스에서 성공하려면 당신 역시 고객들에게 그 가치를 보여줘야 한다. 그러니, 무언가 숨기려고 하지 마라.

    깨달음을 주는 엘리베이터 조사

    가시성이라는 주제를 다루면서 내가 가장 선호하는 방법은 낯선 건물에서 막 엘리베이터를 타고 올라가 어떤 층에서 내렸다고 가정해보는 것이다. 엘리베이터에서 내린 다음에는 무엇을 해야 할지 알아봐야 한다. 내가 필요한 정보가 눈에 보이는가? 내가 어디로 가야 할지 알려줄 표지판이나 어떤 다른 단서가 있는가?
    건축가들은 물리적 환경에서 표지판을 만들 때 ‘길 찾기(wayfinding)’에 대해 이야기한다. 하지만 그 원리는 웹사이트, 레스토랑 메뉴 그리고 다른 수많은 것들에 적용할 때에도 마찬가지다. 핵심은 바로 가시성이다.

    셜록, 에드워드, 도널드 노먼 그리고 기

    정보에 관해서는 정보의 ‘해상도’를 줄이는 것에 의존하면 안 된다.
    ‘우리는 단순함을 갈망하는 동시에 복잡성 또한 필요하다’


    찾아봐야 할 10가지 비가시적 사항들

    1. 당신의 제품 정보가 실제로 사용 불가능한 상태임에도 사용 가능하다는 신호를 보내지는 않은가? 아니면 당신이 사람들이 볼 수 없는 어딘가에 그것을 숨겼던 것은 아닌가?
    2. 무언가가 물리적으로 사용자의 정보에 대한 시야를 가리지 있지는 않은가? 팝업창? 물리적 장애물? 아니면 그 밖의 것? 일단 제거하라!
    3. 중요한 정보가 배너광고나 기타 관련성이 미심쩍은 그 밖의 무언가와 같이 무시해도 될 법한 것처럼 보이지 않는가?
    4. 당신은 사용자들이 어떤 종류의 작업을 완료하는 데 필요한 중요한 정보를 포함하는 것을 잊어버리지는 않았는가?
    5. 제품에 ‘접힘’ 속성이 있나? 만약 그렇다면 사용자가 필요로 하는 정보는 모두 접힌 면의 동일한 부분에 그룹화되어 있는가? 아니면 그 접힘 면이 이름과 주소, 입력과 출력 등을 따로 떨어뜨려 놓고 있지는 않은가? 또 주요 연락처 링크와 같이 중요한 것이 접힌 면 아래에 가려져 있지는 않은가?
    6. 화면상의 기다란 페이지는 사용자들이 스크롤을 하게끔 강력한 신호를 보내고 있는가?
    7. 인터넷에서 일정 금액을 지불해야 콘텐츠를 볼 수 있도록 한 것이 오히려 무료 콘텐츠에 대한 사용자 경험을 방해하고 있지는 않은가?
    8. 웹사이트에 있는 모든 페이지, 빌딩에 있는 모든 문 그리고 당신의 제품에 대한 새로운 시각과 전망은 ‘깨달음을 주는 엘리베이터 조사’에 나오는 요구사항을 충족시킬 수 있는가?
    9. 당신의 디자인팀이 제품을 더 나아지게 하려고 어수선함을 줄이고 있는가, 단지 더 예쁘게 만들려고 줄이고 있는가? 더 나아지는 게 더 낫다.
    10. 사용자가 업무를 수행하는 데 도움이 되는 일반적인 용어 대신 내부에서 또는 독점 브랜드 용어를 사용하고 있지는 않은가? 예를 들어, ‘보험 가입하기’ 대신에 ‘토털 유연성(Total Flexibility Plan)에 가입하기’라고 말하지는 않는가?

    자료 출처: UX 불변의 법칙 — 에릭 리스

  • 5. 인체 공학: 사용성 좋은 디자인의 10가지 법칙

    5. 인체 공학: 사용성 좋은 디자인의 10가지 법칙

    인체공학의 12가지 기본 원칙이다.

    1. 중립 자세로 작업하도록 하라.
    2. 과도한 힘을 줄여라.
    3. 모든 것을 쉽게 닿을 수 있는 곳에 두어라.
    4. 적절한 높이에서 작업하라.
    5. 과도한 움직임을 줄여라.
    6. 피로도와 하중을 최소화하라.
    7. 문제가 생길 수 있는 곳을 최소화하라.
    8. 여유 공간을 제공하라.
    9. 움직이게 하고, 운동을 시키고, 신충석이 있게 하라.
    10. 편안한 환경을 유지하라.
    11. 명료성과 이해도를 향상해라.
    12. 작업 구조를 개선하라.

    커서는 사용자의 전자 손가락 역할을 한다. 실제 손가락과 마찬가지로, 커서를 이용해 확실히 할 수 있는 행동과 확실히 할 수 없는 행동이 있다.

    버튼: 대체로 클수록 좋다.

    피츠의 법칙

    MT = 운동시간, a, b — 실험 상수, A=운동 거리, W = 목표물의 폭이다. 목표물의 크기가 작고 움직이는 거리가 증가할수록 운동 시간(MT)은 증가한다는 것을 의미하는데, 속도가 증가할수록 정확성은 떨어짐

    큰 버튼이 작은 버튼보다 찾기도 쉽고 클릭하기에도 빠르다.

    • 모든 것을 쉽게 닿을 수 있는 곳에 둬라
    • 명료함과 이해도를 향상해라

    실제로, 클릭할 수 있는 링크는 크기가 클수록 더 누르기가 쉽다. 일반적으로 큰 스크린에서는 링크를 사용하는 것이 별 문제가 되지 않는다. 하지만 작은 터치스크린 기기에서 큰 손가락을 사용해 링크를 눌러야 한다면?

    오늘날 우리는 인터랙티브 한 스마트 TV의 등장을 지켜보고 있다. 스마트 TV에서는 인터넷에 접속해서 원하는 동영상을 바로 스트리밍 할 수 있어서 전통적인 방송물에 대한 의존도가 감소한다.

    1000분의 1초 계산

    • 메뉴가 펼쳐지기 전에 커서가 0.5초 정도 랭크 위에서 머물 수 있게 하라. 이것은 내가 인터플로라 사이트에서 겪었던 ‘블루밍 플라워’의 문제를 피할 수 있게 해 준다.
    • 애니메이션화 된 메뉴가 활성화되고 나면, 메뉴는 최대한 빨리 화면에 나타나야만 한다. 가능하다면 0.1 초도 안 되는 시간 내에 말이다.
    • 방문자가 메뉴로부터 커서를 이동시키면 메뉴를 잘못 움직이더라도 메뉴 활성 영역에 커서를 반드시 두어야 할 필요가 없다.
    • 그렇지만 메뉴가 사라질 때도 나타날 때만큼 빨리 없어져야 한다.

    기능성의 관점에서, 엄처 나게 빠른 당신의 컴퓨터가 아닌 느린 기기에서도 이러한 동작들의 타이밍을 반드시 확인하도록 하라.

    강조점 다음의 첫 단어

    스크린에서 인체공학과 관련된 가장 중요한 연구 결과 중 하나는 긴 링크들의 리스트를 어떻게 잘 구성하는가에 관한 것이다. 사용성 전문가 제이콥 닐슨은 ‘F 패턴’에 대해 이야기한다. 기본적으로 사람들은 대충 리스트를 훑어볼 때 강조점 다음에 나온 첫 단어를 본다. 종종 이 첫 단어는 사람들이 링크 전체를 읽도록 유도한다.

    리스트를 준비할 때 가장 중요한 단어가 끝이 아니라 시작되는 지점에 바로 나오도록 해야 한다는 것이다. 이것은 검색 결과의 리스트에서 특정 웹 페이지의 이름을 알려주는, 컴퓨터로 해독할 수 있는 메타 타이틀에도 적용된다. 그렇기에 가장 중요한 단어로 시작하지 않는 리스트, 메뉴, 혹은 링크는 그것이 무엇이든 비판적으로 보아라. 그리고 당신의 회사 이름이 아마도 리스트에서 가장 중요한 정보는 아니라는 것을 명심하라.

    탭 키와 다른 키보드 단축키들

    마우스의 출현에도 불구하고, 수많은 사용자들이 무언가를 할 때 키보드에서 손을 떼지 않는다. 호텔 룸을 예약하면서 한 영역으로 이동할 때 탭 키를 누르고, 작업하고 있던 문서를 저장하려고 키보드 단축키를 사용한다.

    편안한 작업 환경을 유지하며, 피로함을 최소화하고, 모든 것이 쉽게 닿을 수 있는 데 있도록 해주었다.

    여유 공간을 제공하라

    인체공학의 기본 원칙에서 여유 공간을 제공하는 것은 두 대의 쇼핑 카트가 슈퍼마켓의 좁은 통로에서 부딪히지 않고 서로 지나칠 수 있게 하라는 것을 의미한다. 혹은 키 큰 사람들이 문틀에 머리를 부딪치지 않도록 하는 것을 의미하기도 한다. 또 버튼을 누르기 편하도록 크게 디자인하는 것도 해당된다.

    ‘다시 처음부터’

    인풋에 다 넣고 실수로 뒤로 가기 할 때 날렸을 때 개 화남.

    업무 구조를 향상해라

    현실 세계에서 인체공학적 작업 구조 개선의 원칙은 합리적인 작업 흐름이 있음을 확인하는 것을 의미한다. 그 흐름이란, 프린터 옆에 프린터 용지를 두는 것, 제품이 조립라인에 따라 이동하는 것처럼 작업 프로세스가 시작되면 방해받지 않고 진행되는 것을 말한다.

    범인은 늘 서식이다.

    ‘침묵의 안내자’

    공연이 끝난 후 한꺼번에 내려오는 관중을 여러 갈래로 분산시키는 큰 기둥들이 있었다. 이 기둥들 중 대다수는 실제 지붕을 받쳐주는 것이 아니라 관중들을 통제하기 우회나 수동적인 장치였다.

    나쁜 인체공학으로 인한 아픔과 고통을 피할 수 있게 도와주는 10가지 질문들

    1. 마우스로 클릭하기 쉬울 만큼 버튼의 크기는 적당히 큰가?
    2. 만약 손가락으로 터치스크린의 버튼을 눌러야 한다면 버튼의 크기는 충분한가?
    3. 드롭다운 메뉴는 커서로 잡아내기 쉬운가? 검토할만한 타이밍 문제가 있는가?
    4. 당신은 마우스를 대체할 수 있는 키보드 단축키를 제공하고 있는가?
    5. 사용자들이 서식을 작성할 때 탭 키를 이용해서 다음으로 건너뛸 수 있는가?
    6. 동시에 사용되어야 하는 요소들이 또한 동시에 보이는가?
    7. 화면에 서로 방해되는 요소들이 있지는 않은가?
    8. 사람들이 무엇을 해야 하는지 알려주는 ‘침묵의 안내자’에 해당하는 것을 제공할 수 있는가?
    9. 시각적 장치들이 당신의 제품을 사용하기 어렵게 만들고 있지는 않은가?
    10. 사용자가 작업을 더 쉽게 하도록 변경하거나 방지할 수 있는 비논리적 작업 순서 또는 작업 흐름의 방해물이 있는가?

    자료 출처: UX 불변의 법칙 — 에릭 리스

  • 4. 힌트(풀 프루프) :  사용성 좋은 디자인의 10가지 법칙

    4. 힌트(풀 프루프) :  사용성 좋은 디자인의 10가지 법칙

    누구나 실수 없이 제품을 사용할 수 있도록 하는 장치이다.

    ‘실패할 염려가 없는’ 제품을 만들고자 하는 노력을 멈추면 안 된다.

    기본적으로 당신이 해야 할 일은 사람들이 뭔가를 할 때 실수하는 것을 막고 그들이 올바른 방향으로 가도록 가볍게 안내하는 것이다. 여기서 ‘가볍게’는 중요한 의미가 있다. 일반적으로 사람들은 무언가를 하도록 지시받는 것을 좋아하지 않기 때문이다. 이는 사람들이 뭔가를 하고 있을 때 절대로 중간에 끼어들어서는 안 된다는 것을 의미한다. 적어도 그들이 당신을 ‘지나치게 강요’한다거나 ‘거슬린다’라고 생각해서는 안된다. 반면 당신은 사람들이 너무 큰 문제에 계속 부딪히는 것은 원하지 않는다. 그러므로 당신의 안내는 최대한 섬세하면서도 효과적이어야 한다.

    균형 있는 경험을 성취하는 것은 매우 어렵다는 것을 미리 알고 가자.


    개선을 위한 비장의 무기 RAE

    Remind

    • 상기는 사람들이 문서를 닫기 전 저장하기나 이메일에 파일을 첨부하는 것과 같이 뭔가를 해야 할 것을 무심코 잊어버렸을 때 가볍게 알려준다.

    Alert

    • 사용자가 다음 단계로 넘어가기 전에 완료해야 하는 것을 구체적으로 표시하거나 태그 하는 것을 의미한다. 예를 들어 비밀번호를 입력한다거나 이용 약관에 동의하는 것이 이런 것들이다.

    Force

    • 이용할 수 없는 옵션들을 제거하는 것을 의미한다. 예를 들어 사용될 수 없거나 특정 시점에 적절하지 않은 메뉴 항목들을 비활성화 상태로 만드는 것이 이에 해당한다.

    사람들은 해야 할 일을 잊어버린다. 그러니 상기시켜라.

    일반적으로 내가 알고 있는 시스템 리마인더에는 두 가지 종류가 있다. 하나는 상당히 표준화된 것으로 “이 문서를 닫기 전 변경사항을 저장하시겠습니까?”와 같은 메시지가 있다. 참으로 유용한 메시지라고 생각한다. 다른 하나는 작업의 진행을 방해하며 많은 선택을 강요한다. “당신의 바탕화면에 사용하지 않는 아이콘들이 있습니다. 이것들을 삭제하시겠습니까?”

    핵심은 사람들이 순조롭게 진행하는 일들을 방해하지 않으면서 도움이 되어야 한다는 것이다. 작업과 직접 관련이 없는 리마 인터는 사람들을 방해한다. 그러니, 당신의 앱이나 인터페이스 내에 리마인더가 있다면 그것들의 당신의 업무와 연관시키거나, 아니면 아예 제거해버리는 것이 좋다.

    만약 도움이 필요 없는 상황이라면, 방해하지 말라.

    주의와 그 밖의 다른 경고들

    주의는 당신에게 오류, 상태 변화, 그 밖에 당신이 신경을 써야만 하는 것들을 알려준다. 하지만 불행히도 몇몇 종류의 주의는 나가 놀게 해달라고 끈질기게 허락을 구하는 어린아이처럼, 컴퓨터가 뭔가를 했다는 사실을 내가 인식하도록 고집을 부리기도 한다.

    우리는 현실 세계에서 의미 있는 경고를 더 잘 만드는 것 같다. 내 경험에 근거한 규칙은 다음과 같다: 임무 수행에 필수적인 것일수록, 관련한 뭔가가 잘못되었을 때 사람들에게 이를 알려줄 효과적인 방법이 더 필요하다.

    양치기 소년 신드롬

    이는 관련성 없는 메시지들과 다른 공지문들이 너무 많아서 놓쳐서는 안 될 정말 중요한 메시지까지 습관적으로 무시해버리는 현상을 말한다. 나 또한 이런 실수를 주로 소프트웨어 설치할 때 여러 번 저질렀다. 설치 과정 완료까지 아무 생각 없이 ‘다음’ 버튼을 기계적으로 누른 것이다. 이 때문에 가끔 ‘새 프로그램이 설치될 위치’처럼 주의를 기울여야 하는 사항을 놓치고 만다.

    만약 팝업창이 컴퓨터 시스템의 대화창과 똑같이 생겼다면, 많은 사람이 이것이 사이트의 팝업창인지 컴퓨터 자체의 대화창인지 혼란스러워할 것이다. 대화창은 대부분 어떤 종류의 오류를 나타내기 위해 등장하므로, 이런 형식의 팝업창은 사람들에게 괜한 불안감만 조성할 수 있다. 특히 이런 팝업창이 익숙하지 않은 사람들에게 더 그렇다.

    결정을 강제하기

    컴퓨터 세계에서, 선택의 기술을 사용할 수 없는 메뉴들을 비활성화-희미하게 보이도록 만드는 것이다.

    모든 것을 고려해 볼 때, 메뉴를 희미하게 나타내는 것이 더 나은 선택인 것 같다. 하지만 앞으로는 이 옵션이 왜 비활성화 상태로 바뀌었는지에 대한 약간의 설명을 제공하는 프로그램이 생겼으면 좋겠다.

    예건대, 마우스를 갖다 댔을 때 설명이 있는 작은 팝업창이 나타나는 프로그램 같은 것이다. 지금까지는 이런 걸 본 적이 없다. 그러나 분명히 훨씬 더 나은 해결책이 나올 것이다.

    개인화의 위험

    다음의 세 가지 사항을 기억하도록 노력해야 한다: 메인 메뉴는 일관성 있게 유지할 것, 개인화로 인해 선택지가 제한되지 않게 할 것, 방문자가 웹사이트나 앱에 이전에 방문했던 이력이 있다고 해도 각각의 방문은 그때마다 새로운 것임을 명심할 것.

    가외성의 마법(Plan B)

    가외성이란 사람들에게 상호 보완적 기능을 하는 여러 개의 유사한 선택지들을 제공하는 것을 의미한다. 예컨대 휴대폰 번호와 이메일 주소를 함께 제공하는 것이 그렇다. 이것은 또한 커다란 방의 양쪽 끝에 불을 끄고 켤 수 있는 스위치가 있는 것처럼 여러 군데의 편리한 장소에 같은 링크나 기능을 반복적으로 제공하는 것을 의미한다.

    당신의 제품을 평가할 때, 위험을 분산할 수 있는 것이 전환 또한 개선할 수 있다는 것을 기억하도록 하라.

    도움이 되는 오류 메시지를 적어라

    서식에서 무언가가 없거나 잘못되었음을 알려주는 작은 경고 메시지는 상당히 도움이 된다. 일반적으로, 구체적일수록 더 유용하다.

    사람들이 더 나은 결정을 하도록 돕기

    화면상의 메시지 대부분은 어떤 종류의 결정을 하도록 요구하는 것들이다. 당신이 화면상의 메시지들을 평가할 때 스스로 할 수 있는 몇 가지 간단한 질문이 있다.

    • 사용자들은 왜 그 메시지가 나타났는지 알고 있는가?
    • 사용자들은 그 메시지를 이해하는가?
    • 사용자들은 그 메시지에 현명하게 대응하는 법을 잘 알고 있는가?
    • 그 메지시에 있는 정보는 유용한가, 아니면 혼란스럽게 하는가?
    • 사용자들은 이 결정과 결과를 이해하는가?
    • 경험이 부족한 사용자들이 내린 결정을 그 상황에 알맞은 것인가?

    이 질문 중 어느 것 하나에도 ‘아니’라고 답한다면 손봐야 할 곳이 있다는 뜻이다. 만약 무언가가 미심쩍다면, 누군가에게 물어라.
    나이 많은 사람들에게 질문하면 아마도 더 인지적인 문제들을 발견할 수 있을 것이고, 그냥 앱을 망가뜨리고 싶으면 10대들에게 물어보면 된다.

    모든 사람이 맞춤법을 올바르게 쓰는 것은 아니다.

    실수를 많이 없앨 수 있는 가장 가단 한 방법 하나는 철자를 맞게 쓰지 않는 사람이나 부주의하게 오타를 입력하는 사람들을 봐주는 것이다.
    이 방법이 항상 내부 검색 엔진에 도움이 되지는 않겠지만, 적어도 구글은 사용자들이 실수했을 때 무엇을 해야 할지 알게 될 것이다. 만약 어떤 철자 오류가 발생하는지 확실히 알고 싶다면 쿼리 로그를 확인하라. 쿼리 로그에서는 사용자들이 가장 많이 검색한 키워드, 가장 실수한 키워드 모두를 찾아봄으로써 틀린 철자나 동의어들에게 최적화할 수 있을 것이다. 검색한 전문가 리치 위긴스는 이룰 ‘우연의 유의어 사전’이라고 부른다.

    사람들은 안내문을 읽지 않는다.

    사람들은 긴 메시지를 싫어한다. 그들은 처음 한두 문장을 읽은 다음, 낯선 단어, 약어, 전문용어를 보면 무시해버리는 경향이 있다. 그러니 메시지가 제대로 기능하기를 원한다면 짧고 간단한 게 구성하라.

    사람들이 당신의 메시지를 기억하게 만들지 마라.

    우리가 흔히 보는 경고문, 알림 그리고 기타 메시지들은 클릭하면 사라지는 팝업창 형태로 나타난다. 이것이 큰 문제가 되는 이유 중 하나는 이 팝업창에는 사이트의 다른 곳, 심지어 다른 장치에서 꼭 필요한 정보가 있다는 것이다. 그러므로 이런 메시지를 ‘이동이 쉽게’ 만들어라. 사용자들이 지시나 정보를 항상 기억하지는 않는다. 그러니 그런 기대를 해서는 안된다. 여기서 전형적인 실수 두 가지가 있다.

    1. 서식과 관련이 있다.
    2. 어떤 부분이 빠졌는지 알려주는 메시지가 없다.
    3. 다른 곳에 기록해야 하거나 붙여 넣기를 해야 하는 정보를 팝업창에 넣는 것이다.

    때로는 당연한 것도 말해줘야만 한다.

    ‘꼭 알아야 할 정보’를 추려서 간단히 인쇄한 ‘빠른 시작 안내서’에서 찾을 수 있는 종류의 것들이다.

    사람들은 일일이 기억하지 않는다.

    사람들은 일반적으로 지시사항을 읽지 않기 때문에, 디자인은 사람들이 언제라도 무엇을 해야 하는지 알려주는 강한 신호를 보낼 필요가 있다. 불운하게도 디자이너들은 그들이 만든 우아한 해결책이 종종 생각보다 더 명확한 시호를 준다고 여기는 것 같다. 결론은 다음과 같다. 사람들이 일단 어떤 것을 사용하는 법을 알아냈다 하더라도 다음에 사용할 때 그 방법을 기억한다는 보장은 없다.

    웹사이트도 이와 동일한 방식으로 기능해야겠지만, 만약 ‘창의적’이거나 ‘혁신적’인 디자인팀이 새롭고 독특한 방식으로 다양한 문제를 해결하고자 한다면 그렇게 기능하지 못할 것이다. 사람들이 별난 디자인 해결책을 모두 기억할 것이라는 기대를 해서는 안된다.

    물리적 제지 장치

    • 사용자가 어떤 잘못된 행위를 하기 직전이라고 알려주는 것
    • 사용자가 하고자 하는 잘못된 행동의 가치를 무효화하는 것
    • 사용자가 올바른 행동을 하게 만드는 것
    • 행동하지 않으면 사용자에게 불편함을 주는 것
    • 행동하지 않으면 사용자에게 고통을 유발하는 것

    제품을 꽤 쉽게 다룰 수 있게 만들어주는 10가지 간단한 방법들

    1. 만약 어떤 것이 제대로 작동하지 않더라도 사용자들이 대응할 수 있는 몇 가지 다른 방법을 제공할 수 있나?
    2. 이해하기 위해 두 번은 읽어야 하는 어떤 오류 메시지나 지시사항을 발견했는가? 만약 그렇다면 그것은 당신이 글로 하는 의사소통 능력을 향상할 수 있는 기회다!
    3. 응답 시간의 속도를 높임으로써 사용자들이 동일한 행동을 반복하지 않도록 할 수 있는가?
    4. 아이들이 열 수 없게 만든 뚜껑, 바리케이드, 또는 사용자들이 자신을 포함한 무언가에 손상을 입히지 않도록 막는 기술 등의 물리적 제지 장치를 구축할 수 있는가? 당신은 어떤 손상이 일어날 수 있는 방법을 알고 있나? 손상을 막으려면 먼저 그것이 어떤 것인지 이해해야 한다.
    5. 시스템 경고문과 혼동될 수 있는 오류 메시지나 경보가 있는가? 만약 그렇다면 이것들을 쉽게 구분할 수 있는 좀 더 독창적인 디자인을 할 수 있나? 혹은 아예 이 메시들을 전부 없애는 건 어떤가?
    6. 당신은 사용자들을 돕는다고 하는 일이 실제로 사용자들에겐 방해가 되는 일이 있지는 않은가?
    7. 당신의 제품에는 다음에 사용할 때는 관련 없을 수 있는 행동을 기억함으로써 혼란을 일으키는 어댑티브 메뉴와 같은 개인화 기능이 포함되어 있는가?
    8. 사용자가 당신의 제품과 상호작용하면서 유용한 방향으로 갈 수 있게 해주는 인지적 단서와 지표를 제공하고 있는가?
    9. 지시사항을 최소한으로 유지하고 있는가? 예약 확인번호와 같은 정보를 사용자가 필요할 때 언제 어디서나 사용할 수 있게 만들었는가?
    10. ‘풀 프루프 해결책’에 관한 누군가의 생각이 실제로는 문제를 해결하기 위해 디자인된 문제 자체보다 못한 것은 아닌가? 만약 그렇다면 문제점들을 수정하거나 아예 그 해결책을 삭제할 수 있는가?

    자료 출처: UX 불변의 법칙 — 에릭 리스

  • 3. 편의 :  사용성 좋은 디자인의 10가지 법칙

    3. 편의 :  사용성 좋은 디자인의 10가지 법칙

    사용자의 흐름을 만들어라

    사용자를 관찰하면 사용자는 목적을 성취하기 위한 흐름에 몸을 맡길 준비가 되어있다. 하지만 그 중간에 흐름을 방해하는 것들이 산재한다. 옷을 사기 위해서 상품을 탐색하는 과정에 나오는 쓸 때 없는 상품들, 그리고 사용자에게 많은 인풋을 요구하는 것들은 다 장애물이다. 장애물을 넘어서 목적을 성취하는 끈기 있는 사용자가 몇 있다. 하지만 그것을 사용자에게 요구하면 안 된다. 사람들이 작업을 완료할 때까지 방해, 우회, 이탈은 최소한으로 줄이는 것이 좋다.

    낯선 상황이 편의성을 부각한다

    사용자의 관점에서, ‘편의성’ 문제는 고전적인 문제와 밀접한 관련이 있다. 비가 오기 전까지는 우산을 어디에 두고 왔는지 절대 알지 못한다.
    우리는 낯선 영역에 들어갈 때, 컴포트 존을 찾는 경향이 있다. 그것은 이미 정립된 우리의 개인적인 일상에 맞는 것들이 분명 어떤 편안함을 제공해주기 때문이다. 어떤 것이 그에 부합하면 우리는 그것을 ‘편리하다’라고 생각한다. 우리는 익숙한 루틴을 좋아한다. 그래서 다른 사람을 위해 디자인하는 것은 무엇이든 익숙함을 제공해야 한다.
    디자이너이자 디자인 평가자로서 우리는 개인적인 컴포트 존 바깥으로 나가야 한다. 사용성에 대해 논할 때 다른 사람들의 도움을 요청함으로써 그렇게 할 수 있다. 디자이너들은 자신의 니즈를 먼저 다루는 경향이 있지만 그렇게 하다가는 다른 사람들의 니즈를 놓칠 수도 있다. 평가자로서, 우리는 대안적 사용 패턴을 찾아내야만 한다.

    페르소나와 다른 유용한 도구들

    좋은 페르소나는 디자인 팀이 다음과 같은 것에 집중하는 것을 도와준다: ‘메리는 이 기능을 사용하고 싶을까?’ 만약 메리가 관심이 없다면 다른 페르소나 중 하나가 관심을 가지도록 해야 한다. 그렇지 않다면 당신은 문제를 해결하기보다는 상황을 더 악화시키는 결과를 초래할 수도 있다. 도입부에 있는 앨런 쿠퍼의 말을 기억하라. “당신이 ‘누군가가 이것을 원할 수도 있다’는 말을 들었을 때가 정말 나쁜 디자인 결정을 듣게 되는 순간이 있다.” 이 말은 마음에 새겨 둘 가치가 있다. 아무튼 페르소나 개념을 만든 사람이 바로 앨런이다.
    새로운 작업에 매번 새로운 페르소나가 필요한 것은 아니다. 내 경험에 의하면, 8명 이상의 페르소나는 너무 구체적이라서 전형적인 특징이 덜 유용해질 것이다. 그러나 일단 훌륭한 페르소나 집합을 구성해둔다면, 특정 작업을 완료하고자 할 때 무슨 일이 일어날지 작성해보는 짧은 시나리오나 관련된 작업의 범위를 묘사하는 고객 여정 지도와 같은 다른 도구들을 개발하는 데 활용하기도 좋을 것이다.

    맥락은 왕국이다.

    몇 년 동안 전문가들은 “콘텐츠가 왕이다.”라는 말을 해오고 있다. 이 말은 절대적으로 진리다. 괜찮은 콘텐츠가 없다면 당신이 가진 제품이 무엇이든 그것들은 쓸모없는 것들이다. 훌륭하게 이용 가능한 웹사이트라 해도 페이지마다 질 낮은 내용으로 도배가 되어있다면 시장 점유율을 움직이지 못할 것이다. 아무리 근사한 호텔이라도 돌처럼 딱딱한 침대를 쓴다면 투숙객이 다시는 찾지 않을 것이다. 음식점이라면 고급스러운 식기보다는 음식의 맛이 성공을 보장하는 열쇠가 될 것이다.
    하지만 개별적인 것들이 결합해 더욱 큰 가치를 만드는 방식인 맥락으로 한 단계 더 나아가 보자.
    호텔 룸의 콘센트처럼, 맥락은 물리적 세계와 가상 세계 모두에서 실제 디자인의 가치가 존재한다는 것을 의미한다. 만약 콘텐츠가 왕이라면 맥락은 왕국임이 틀림없다.
    오늘날 보편적으로 볼 수 있는 웹사이트 스타일은 페이지 상단에 메인 메뉴, 하단에는 검색 옵션들, 가운데 넓은 공간에는 콘텐츠 그리고 오른쪽 열에는 관련 콘텐츠의 리스트를 두는 것이다. 이러한 스타일은 화면이 작은 기기에는 잘 적용되지 않지만, 관련 콘텐츠를 강조하는 콘셉트는 엄청나게 중요하고 실질적인 가치를 제공한다. 많은 디자이너들이 이 레이아웃을 클라이언트에게 ‘판매’ 하고 있지만, 불행히도 이 중요한 기능을 활용하는 웹사이트 소유자는 별로 없다. 그 결과 웹사이트의 오른쪽에는 말도 안 되는 것들만 가득하다. 공간은 빈 채로 남아 있는 법이 없다.
    더 최악인 것은, 명백하게 관련 있는 물건들, 가령 진공청소기와 여기에 사용되는 먼지봉투가 한 웹페이지에서 보이지 않는다는 것이다. 이것은 미친 짓이다. 만약 사용성 문제를 조사하고 있다면, 함께 묶어서 나타내야 하는 콘텐츠를 주의 깊게 살펴라. 온라인과 관련된 것들을 작업할 때 특히 그렇게 해야 한다. 서둘러서 웹사이트를 출시하려고 하는 과정에서 이런 문제들은 미루어지고 마침내 완전히 잊히기도 한다. 이처럼 맥락이 있는 크룹을 만드는 일은 당신이 무엇을 창조해내든 간에 편의성을 위해서 필수적으로 해야 한다.

    사람들이 필요로 하는 모든 것을 사용할 수 있게 해라

    만약 당신이 차를 수리한다면, 필요한 모든 도구와 부품을 가까이에 둘 것이다. 식사를 준비한다면 아마도 요리를 시작하기 전에 모든 필요한 모든 재료를 사서 준비할 것이다.
    누군가 당신의 사이트 어딘가에 있는 콘텐츠를 필요로 한다면 그것에 접근하기 쉽게 만들어라.

    클릭 세 번으로 끝내기

    중요한 점은 사람들이 클릭할 때마다 그들이 원하는 콘텐츠에 가까이 다가갈 수 있게 해주어야 한다는 것이다. 그렇지 않다면 사람들은 시간 낭비를 하고 있다고 생각할 텐데, 이는 종종 있는 일이다.
    만약 상담이 필요해 고객센터에 전화했는데 처음 상담원에서 다른 부서로 연결되고, 그렇게 연결된 전화가 당신이 상담을 받는 목적에 순조롭게 다가가는 것이라면 기분이 좋을 것이다. 연결된 전화에 다시 똑같은 이야기를 하고 또 해야 한다면 결국 참다못해 짜증이 날 것이다.

    제품을 더 편리하게 만드는 10가지 방법들

    1. 사용자들이 완료하고자 하는 작업을 고려하라. 당신의 제품은 보지 말고 각 작업의 완료에 필요한 세 가지 항목의 리스트를 작성하라. 그런 다음 당신의 제품을 확인하라. 사용자가 필요로 하는 모든 것을 이용할 수 있는가?
    2. 서로 관련된 콘텐츠들을 묶어서 더 찾기 쉽게끔 만들 수 있는가?
    3. 인터랙티브 한 페이지나 기기에 있는 영역들을 구분하기 위해 색깔이나 다른 시각적 신호를 사용할 수 있는가?
    4. 만약 멀티모드 경험이 있는 제품이 있다면 각각의 프로세스가 서로 방해하지 않는다는 것을 보장할 수 있는가?
    5. 당신의 제품을 사용하는 다양한 사용자들에 관해 얼마나 많이 알고 있는가? 눈을 감고 사용자 중 한 사람들 떠올려볼 수 있는가? 그럴 수 없다면 사용자들에 대해 더 알도록 해야 한다. 누군가가 떠오른다면 그 사람으로 페르소를 만들어 봐라. 주변에 알고 있는 사람으로부터 세부 사항을 더해가며 페르소나를 더 입체적으로 만들 수 있다. 이제 1번 질문으로 되돌아가서 이 사람이 어떤 것을 성취하고자 하는지 자신에게 물어라.
    6. 온라인에서 오프라인으로 불필요하게 넘나들어야 하는 일이 있다면 그것을 제거할 수 있는가? 예를 들어, 사용자들에게 출력해서 팩스로 보낼 것을 요청하는 대신, 이메일로 보내라고 할 수 있는가?
    7. 사용자가 당신의 제품을 좋아해야만 하는 이유를 다섯 가지만 적어 봐라. 다섯 가지를 대기가 힘들다면, 몇 가지 이유만이라도 만들어 낼 수 있는가? 이제 돌아가서 새로운 이유들을 실행할 수 있게 해 줄 콘텐츠 또는 맥락에서 빠진 것이 있는지 찾아봐라.
    8. 당신의 제품은 유용한 내용을 제공하고 있는가? 그렇지 않다면 무엇이 빠져있는가? 영업시간? 연락처 정보? 상세한 제품 설명? 연관 링크? 그 밖의 무언가? 잘 떠오르지 않는다면 1번 질문을 참고하라.
    9. “고객님의 편의를 위해~”라고 말하면서 그와 반대로 불편함만 제공하고 있지는 않은가? 많아야 그렇다면 그렇게 돌려 말하지 말고 당장 개선하라.
    10. 사용자들이 동일한 정보를 여러 차례 제공하게 만드는 불편함을 없앨 수 있는가?

    자료 출처: UX 불변의 법칙 — 에릭 리스

  • 2. 반응: 사용성 좋은 디자인의 10가지 법칙

    2. 반응: 사용성 좋은 디자인의 10가지 법칙

    반응의 3 요소

    1. 행동
    2. 인지
    3. 새로운 행동

    행동은 수신이라고 생각을 하면 편하다. 전화를 받는 과정을 보면 수신 음 혹은 진동을 확인한다. 수동적인 과정으로 볼 수 있지만 전화를 보지 않겠다는 생각으로 전화를 껐다면 전화를 확인할 수 없다. 수신을 하는 과정도 행동이라고 보는 것이 좋을 것 같다. 이 관점이 어려우면 친구들과 카페에서 이야기하는 과정을 보면, 약속을 잡고 카페에 가게 된다. 그리고 카페에 앉아서 친구의 이야기를 듣는다면 이 과정도 행동이라고 까지 보는 것이 좋을 것 같다.

    행동 이후에는 인지 과정이 있는데, 모든 행동 뒤에는 메시지가 있다. 무의미한 행동이라고 할지라고 무의미라는 메시지가 있고, 무의미를 전달하는 의도가 있다. 그래서 모든 행동의 과정에서는 메시지를 파악하게 된다. 이 메시지를 파악하게 되면 새로운 행동을 유발하게 되는데 그렇게 반응은 제공하는 사람에게도 듣는 사람에게도 서로 상호 간의 영향을 미친다고 할 수 있다.


    반응성 높이는 고전적 3 가지 방법

    어그로 끌기(초청의 비결)

    눈길을 끌고, 뭔가 좋은 것이 있다는 신호를 주기 위해 설계된 것. 배너 광고, 혹은 정적이면서 고도로 맥락적인 ‘더 알아보기’ 링크 등이 이러한 예이다.

    인터랙션(전환적 기법)

    사용자가 행동 혹은 인풋에 대해 즉각적으로 반응하는 것 — 예를 들어 웹을 둘러보는 동안 화살표 모양 커서가 상호작용적인 요소에 놓이면 손 모양으로 변하는 것이 그런 것이다.

    리액션(반응의 메커니증)

    사용자가 한 어떤 의식적인 행동에 따른 진정한 ‘수신’을 나타내는 것. 예를 들면 화면이 새로운 페이지를 로딩하기 전에 공백상태로 있거나, 파일이 다운로드되고 있음 혹은 다운로드가 완료되었음을 나타내는 화면 성의 메시지가 이에 해당한다.


    피드백 부족 = 렉 걸렸나?

    스마트 폰 앱을 사용하다 보면 한 번씩 내 인풋에 반응을 보이지 않는다면 여러 번 선택을 하다가 결국 그 앱을 끄게 된다. 근데 그것이 피드백 설계를 잘못해서 그렇다면 설계에서 문제가 발생한 것이지 앱의 문제는 아니다. 그리고 더더욱 디바이스의 문제가 아닌데도 사용자는 스마트폰을 바꿀 생각을 하게 된다.


    부정적 반응의 개노답 3형제 FUD(두려움 Fear, 불확실성 Uncertainty, 의심 Doubt)

    두려움

    사람들이 시스템을 망가트리거나, 또는 되돌릴 수 없는, 의도지 않은 행위가 시작될까 봐 무서워하는 것이다. 예를 들어, 정보를 전송하면 어떤 일이 일어날까? 단순히 정보를 수정한 것이다? 아니면 결제가 된 것은 아닐까? 하는 두려움이 그것이다.

    불확실성

    두려움과 연관된다. 하지만 이 경우, 당신이 비극적인 결정을 내리게 될 것이라고 꼭 두려워할 필요는 없다. 단지 당신은 애매하게 선택해서 잘못된 결정을 내리지 않을까 염려할 뿐이다.

    의심

    사람들이 자신이 무엇을 하든 성공적인 결론을 도출하지 못할 것이라는 확신이 들 때 일어난다. 예를 들어, 옵션들 중 그 어떤 것도 내가 고를 수 있는 것이 없을 때 말이다.


    디지털 환경에서의 반응 메커니즘

    • 명암: 현재 활성화되었음을 보여주기 위해 특정 부분을 밝게 하거나 조작이 완료될 때까지 화면의 일부를 어둡게 하는 것
    • 줌: 특정 과정이 진행되는 동안 줌을 확대하거나 과정이 완료되면 줌을 축소하는 것
    • 사운드: 특정 동작과 관련한 독특한 멜로디나 사운드. 우리는 아마 메일이나 문자가 왔음을 알려주는 휴대폰 알람이 가장 익숙할 것이다.

    10가지 체크리스트

    1. 버튼을 눌렀을 때 그것이 반응하는가?
    2. 파일이 저장되었을 때, 그것이 잘 저장되었는지 볼 수 있는가?
    3. 만약 커서를 링크나 다른 상호작용이 가능한 대상 위에 둘 때 커서는 그 대상이 클릭이 가능한 상태임을 표시하는 특정한 모양으로 바뀌는가?
    4. 당신의 사이트는 컴퓨터 화면에 맞게 사이즈가 조절되는가?
    5. 파일을 다운로드하거나 결제 과정을 클릭하는 것과 같은 기본 태스크를 완료해보도록 해라. 그 과정에서 당신이 행한 동작을 사이트가 인지하고 확인을 해주었으면 하고 바랄 때가 있는가?
    6. 파일 다운로드같이 시간이 걸리는 절차들이 진행 상황에 대한 지속적인 피드백을 제공하는가?
    7. 당신이 물리적 제품을 다루고 있다면 그것을 피드백을 제공하고 있는가? 어떤 물건이 언제 스위치가 켜지고 꺼지는지, 혹은 소리 등이 커지고 작아지는지 알 수 있는가?
    8. 피드백은 제때 도착하는가? 아니면 동작이 실행되고 나서 한참 후인가?
    9. 반응 메커니즘은 이해가 가능한 것인가? 아니면 사용자들이 아이콘을 비롯한 다른 신호들을 추측해서 알아내야 하는가? 정립된 모범 사례를 적용하고 있는가, 아니면 처음부터 개발 중인가? 당신의 옆집 이웃이나 당신의 가족들도 그것을 이해할 수 있는가?
    10. 콘텐츠의 레이아웃과 품질은 그것이 출력되는 특정 기기의 한계를 반영하고 있는가? 만약 그 콘텐츠가 기기에 따라 달라진다면, 기기에 맞춰 적절하게 크기가 확대되거나 축소되는가? 일반적으로 확대하는 것이 더 낫다.

    자료 출처: UX 불변의 법칙 — 에릭 리스

  • 1. 기능성: 사용성 좋은 디자인의 10가지 법칙

    1. 기능성: 사용성 좋은 디자인의 10가지 법칙

    기능성

    사용성의 작동과 작동하지 않은 측면과 디자인에 초점을 맞추면 기능성은 비교적 쉽게 이해할 수 있다.

    기능성 확보를 위한 3가지 팁

    1. 버튼과 링크는 클릭하면 반드시 작동해야 한다.
    2. 작동을 하지 않으면 작동하지 않는 이유를 설명해야 한다.
    3. 작동은 사용자의 기대에 맞게 작동을 해야 합니다.
    4. 즉각적으로 반응해야만 한다.
    5. 처리 속도가 용인할 정도의 범위여야 한다.

    서비스 전면 개편보다는 미세한 형태 조정

    사이트 않은 모든 요소들이 제공자의 의도된 방법으로 사용자와 상호작용을 하지 않는다. 우리의 서비스와 사용자의 교감을 방해하기 때문이다. 절대 침소봉대해 모든 것을 갈아엎을 생각을 하지 말고 한 단계 한 단계 단계를 밟아 가는 것이 좋다.

    적절한 Input을 만들기 위한 4가지 팁

    1. 사용자 데이터를 인풋 하기 쉬워야 하며, 정확한 정보를 입력할 수 있게 만들어야 한다.
    2. 융통성 없는 입력 양식은 Input이 실패할 가능성을 크게 높인다.
    3. 연계된 Input 및 로그인에 대한 필요성 역시 실패의 가능성을 높인다.
    4. 오해의 소지가 있는 지시사항은 사용자들을 좌절하게 만드는 아주 큰 요인이다.

    필수 기재 사항

    Input을 테스트할 때는 사람들이 Input을 완성하는 데 필요한 모든 정보를 합리적으로 제공할 수 있는지 확인해야 한다. 나는 이것이 틀림없이 전환 실패가 발생하는 가장 큰 이유라고 확신한다.

    연계되어 있는 Input

    완료해야 하는 두 가지 다른 Input이 있다면, 사람들이 적절한 순서에 따라 이것을 보게 해야 한다. 그리고 제발 사람들이 이 두 Input을 모두 작성할 충분한 시간을 주도록 하라.

    설명서와 기능성

    뭔가를 시험할 때에는 문자로 주어진 설명서에 따를 것! 만약 설명서대로 작동하지 않거나 설명서가 잘못된 지시를 하고 있다면 기능적인 문제에 봉착할 것이기에 이런 종류의 문제를 세심히 살펴 고치도록 한다. 모든 사항을 하나의 언어로 통일하는 것도 좋은 아이디어이다. 다음번에 동일한 페이지에서 여러 언어를 혼합해 사용하는 인터내셔널 웹사이트에 방문하게 된다면 이점을 기억하도록 하라.

    서비스의 목표를 이해하고 집중하는 것이 좋습니다.

    • 서비스 제공의 목표가 무엇인가?
    • 서비스가 설정한 목표를 달성했는지 어떻게 측정하고 확인하는가?

    주의해야 할 10가지 기능적 사항들

    1. 당신이 설정한 제품의 목표는 무엇인가? 그에 대한 분명한 아이디어가 있는가? 아니라면 조용히 30분간 이에 대해 생각해보고 당신이 실제로 시작하는 것을 성취할 수 있는지 확인하기 위한 과업을 테스트해보도록 한다.
    2. 사람들이 작성해야 하는 Input이 있는가? 팩스 번호처럼 사람들이 일반적으로 가지고 있지 않은 정보를 요청하고 있지는 않은가?
    3. 만약 사람들이 당신의 제품과 상호작용하는 중 방해를 받아서 하던 일을 멈춰야 한다면, 그들이 다시 그 일을 시작할 때 하던 위치에서 재개할 수 있는가? 만약 아니라면 그 과정을 쉽게 만들기 위해 다신은 무엇을 할 수 있는가?
    4. 극단적인 상황을 생각해본 적 있는가? 예를 들어 방문자가 당신의 국가에 살지 않는다면? 그 사람이 5자리 우편번호나 7자리 전화번호가 없거나 숫자와 글자가 모두 있는 우편번호를 사용한다면? 그런데도 방문자가 Input을 채울 수 있는가? 아니면 이 난관을 제고할 수 있는가?
    5. 당신의 Input은 ‘융통성 있는’ 편인가? 아니면 과도할 정도로 엄격한 입력 패턴을 요구하는 비즈니스 규칙이 있는 것은 아닌가?
    6. 만약 뭔가가 제대로 진행되지 않을 경우, 사용자들이 대안으로 취할 방법이 있는가? 예를 들어, 온라인 연락처 Input을 보완하기 위한 전용 이메일 주소나 전화번호가 있는가?
    7. 만약 온라인 쇼핑 사이트에서 장바구니에 뭔가를 담을 경우, 그 물건이 결제 완료 시점까지 담겨 있는가? 결제 과정을 완료하는 것이 어렵지 않은가? 당신의 어머니도 할 수 있는 일인가?
    8. 당신의 제품은 시간이 지남에 따라 기능이 떨어지는가? 실제로 제품에 기능적 문제가 있는가, 아니면 프로세스나 서비스를 다시 디자인하는 것에 대한 문제인가?
    9. 당신의 온라인 사이트는 모든 브라우저에서 잘 작동하는가? 다른 기기들에서도 잘 작동하는가? 온라인 Input, 비디오 및 오디오 조절 장치 그리고 대시보드 타입의 위젯과 같이 과업 수행에 필수적인 것들에 특히 관심을 가지도록 해라.
    10. 사진과 그래픽을 로딩하는데 시간이 너무 오래 걸리지 않는가? 개별 파일의 크기를 줄이기 위한 최적화가 가능한가?
  • 사용성 좋은 디자인의 10가지 법칙

    사용성 좋은 디자인의 10가지 법칙

    사용성이라는 이야기가 언제 제일 많이 나올까요? 처음 접하는 아이들에게서 사용성이라는 이야기가 나오지 않습니다. 하지만 어느 정도 디지털 경험이 있는 사람에게서 익숙하지 않은 상황을 마주했을 때 사용성을 느끼게 됩니다. 사용성을 느끼게 될 때는 불편할 때 이전이 좋았구나 내지는 지금 것이 불편한 것을 경험합니다. 서비스 공급자가 이것을 캐치하고 사용성을 높인다면 다시 사용성의 이야기는 사라집니다. 좋은 사용성은 공기와 같아서, 이상하면 느껴지고 익숙하면 느껴지지 않습니다. 익숙한 것이 매연이면 맑은 하늘을 봤을 때 맑은 기분을 느끼게 되고, 맑은 공기만 맡다가 황사를 맞이하게 되면 탁함을 느끼는 것과 같은 원리라고 할 수 있습니다.

    그럼 사용성을 어떻게 좋게 만들 것이냐는 이야기는 너무 많은 내용이 있어서 정리를 하면서 여러분들께 설명드릴 예정입니다. 크게 세 가지로 나눌 수 있습니다. 사용 용이성과 우아함 그리고 명료성으로 나눌 수 있습니다. 그 하위에 붙는 요소들은 아래와 같습니다.

    사용 용이성

    • 기능성
    • 반응성
    • 편의성
    • 풀 프루프
    • 인체 공학

    우아함과 명료성

    • 가시성
    • 논리성
    • 일관성
    • 예측 가능성
    • 이해 가능성

    글을 쓰다 보니 10개로 구분이 되었는데 이것들은 너무 많은 영역에서 사용되는 것이라 따로 설명을 드려야 하나 할 정도로 당연한 것들입니다. 혹시나 보고서나 제안서를 쓰실 때 참고하시라고 넣어봤습니다.


    디자인을 사용자에게 도움이 될 수 있게 만드는 방법은 간단합니다.

    • 명확한 목표를 가지고
    • 체크리스트를 이용해 잠재적 문제를 찾고
    • 사용자의 반응을 확인하고
    • 반응성의 3가지 핵심 — 주의 환기, 즉각적 반응, 반응 메커니즘을 구성하고
    • 논리적 추론을 활용해 사용자에게 힌트를 던지는 디자인을 하고
    • 사용성을 개선해 사용자를 만족시키면 됩니다.

    이것은 글로만 존재하는 것이 아닌가 할 정도로 만드는 사람의 입장에서는 이것들을 다 확인할 수 없어 안타까울 따름입니다. 장기 프로젝트가 될 가능성이 농후하지만 같이 한번 떠나보시죠.


    디지털 디자인의 정수: 사용성과 아름다움의 완벽한 조화

    사용 용이성: 디지털 세상의 나침반

    디지털 세계에서 사용 용이성은 마치 안개 속에서 길을 밝혀주는 등대와 같습니다. 사용자가 웹사이트나 앱을 처음 접했을 때, 그들이 느끼는 첫인상과 경험이 바로 이 사용 용이성에 달려있죠. 이것은 단순히 ‘쉽게 사용할 수 있다’는 의미를 넘어서는 복합적인 개념입니다. 자, 이제 사용 용이성의 다섯 가지 핵심 요소를 자세히 들여다보겠습니다.

    기능성: 디지털 제품의 심장

    기능성은 마치 자동차의 엔진과 같습니다. 겉으로 보이지 않지만, 없으면 아무것도 할 수 없죠. 디지털 제품에서 기능성이란 사용자가 원하는 작업을 수행할 수 있게 해주는 능력을 말합니다. 예를 들어, 온라인 쇼핑몰을 생각해봅시다. 사용자가 원하는 상품을 쉽게 찾고, 장바구니에 담고, 결제할 수 있어야 합니다. 만약 결제 기능이 제대로 작동하지 않는다면? 그 쇼핑몰은 아무리 디자인이 멋져도 소용이 없겠죠. 또 다른 예로, 음악 스트리밍 앱을 들 수 있습니다. 사용자가 원하는 곡을 검색하고, 재생 목록을 만들고, 오프라인으로 음악을 저장할 수 있어야 합니다. 이런 기본적인 기능이 없다면, 그 앱은 사용자에게 외면받을 것입니다.

    반응성: 디지털 세계의 속도계

    반응성은 마치 고속도로를 달리는 자동차의 속도계와 같습니다. 얼마나 빠르게 움직이고 있는지, 또 얼마나 빠르게 목적지에 도착할 수 있는지를 알려주죠. 디지털 제품에서 반응성은 사용자의 행동에 얼마나 빠르고 정확하게 반응하는지를 의미합니다. 예를 들어, 소셜 미디어 앱에서 ‘좋아요’ 버튼을 눌렀을 때 즉시 반응이 있어야 합니다. 몇 초라도 지연된다면 사용자는 답답함을 느낄 것입니다. 또 다른 예로, 온라인 뉴스 사이트를 생각해봅시다. 사용자가 기사를 클릭했을 때 페이지가 빠르게 로드되어야 합니다. 만약 로딩 시간이 길어진다면, 사용자는 다른 사이트로 이탈할 가능성이 높아집니다.

    편의성: 사용자 경험의 윤활유

    편의성은 마치 부드럽게 작동하는 자동차 기어와 같습니다. 사용자가 거의 의식하지 않고도 자연스럽게 사용할 수 있게 해주죠. 디지털 제품에서 편의성은 사용자가 최소한의 노력으로 원하는 작업을 수행할 수 있게 해주는 것을 의미합니다. 예를 들어, 이메일 앱에서 새 메일을 작성할 때 자동 완성 기능이 있다면 얼마나 편리할까요? 받는 사람의 이메일 주소 일부만 입력해도 전체 주소가 자동으로 완성되니까요. 또 다른 예로, 비디오 편집 앱을 들 수 있습니다. 복잡한 편집 기능을 간단한 드래그 앤 드롭으로 구현할 수 있다면, 초보자도 쉽게 사용할 수 있을 것입니다.

    풀 프루프: 실수 방지의 안전망

    풀 프루프는 마치 자동차의 에어백과 같습니다. 사고가 났을 때 피해를 최소화해주는 안전장치죠. 디지털 제품에서 풀 프루프는 사용자의 실수를 방지하거나, 실수가 발생했을 때 쉽게 복구할 수 있게 해주는 기능을 말합니다. 예를 들어, 문서 작성 프로그램에서 자동 저장 기능은 대표적인 풀 프루프 기능입니다. 갑자기 전원이 꺼져도 작업 내용을 잃지 않을 수 있죠. 또 다른 예로, 온라인 뱅킹 앱을 생각해봅시다. 큰 금액을 이체할 때 확인 절차를 한 번 더 거치게 하는 것도 풀 프루프의 한 형태입니다. 실수로 잘못된 계좌로 돈을 보내는 것을 방지할 수 있으니까요.

    인체 공학: 디지털 세계의 안락의자

    인체 공학은 마치 편안한 자동차 시트와 같습니다. 오래 앉아있어도 피로하지 않고 편안하게 해주죠. 디지털 제품에서 인체 공학은 사용자의 신체적, 심리적 특성을 고려한 설계를 의미합니다. 예를 들어, 모바일 앱에서 주요 버튼들을 엄지손가락이 쉽게 닿는 위치에 배치하는 것이 인체 공학적 설계입니다. 또 다른 예로, 데스크톱 소프트웨어의 경우 장시간 사용해도 눈의 피로를 줄일 수 있는 색상 scheme을 사용하는 것도 인체 공학적 접근이라고 할 수 있습니다.

    우아함과 명료성: 디지털 미학의 정수

    우아함과 명료성은 디지털 디자인의 예술적 측면을 대표합니다. 이는 단순히 ‘예쁘게 보이는 것’을 넘어, 사용자에게 직관적이고 효과적인 경험을 제공하는 것을 의미합니다. 마치 잘 정돈된 정원처럼, 모든 요소가 조화롭게 배치되어 있으면서도 각자의 역할을 명확히 수행하는 상태를 말하죠. 이제 우아함과 명료성을 구성하는 다섯 가지 요소를 자세히 살펴보겠습니다.

    가시성: 디지털 세계의 안내판

    가시성은 마치 도로의 교통 표지판과 같습니다. 사용자가 어디에 있는지, 어디로 가야 하는지를 명확히 알려주죠. 디지털 제품에서 가시성은 사용자가 필요한 정보와 기능을 쉽게 찾을 수 있게 해주는 것을 의미합니다. 예를 들어, 뉴스 웹사이트에서 주요 섹션들을 상단 메뉴에 배치하는 것은 좋은 가시성의 예입니다. 사용자는 한눈에 원하는 섹션으로 갈 수 있죠. 또 다른 예로, 스마트폰의 설정 앱을 들 수 있습니다. 각 설정 항목을 아이콘과 함께 표시하면 사용자는 더 쉽게 원하는 설정을 찾을 수 있습니다.

    논리성: 디지털 세계의 지도

    논리성은 마치 잘 설계된 도시의 도로 체계와 같습니다. 모든 길이 서로 연결되어 있고, 어디로 가야 할지 쉽게 알 수 있죠. 디지털 제품에서 논리성은 정보와 기능이 사용자의 기대에 맞게 구조화되어 있는 것을 의미합니다. 예를 들어, 이커머스 사이트에서 상품 카테고리를 계층적으로 구성하는 것은 좋은 논리성의 예입니다. ‘전자제품 > 컴퓨터 > 노트북’과 같이 구성하면 사용자는 자연스럽게 원하는 상품을 찾아갈 수 있습니다. 또 다른 예로, 음악 스트리밍 앱에서 아티스트 페이지를 ‘소개 > 인기곡 > 앨범 > 관련 아티스트’ 순으로 구성하는 것도 논리적인 구조입니다.

    일관성: 디지털 세계의 리듬

    일관성은 마치 잘 작곡된 음악의 리듬과 같습니다. 예측 가능한 패턴이 반복되면서 전체적인 조화를 이루죠. 디지털 제품에서 일관성은 디자인 요소들이 전체적으로 통일된 스타일과 동작 방식을 가지는 것을 의미합니다. 예를 들어, 웹사이트에서 모든 페이지의 헤더와 푸터 디자인을 동일하게 유지하는 것은 좋은 일관성의 예입니다. 사용자는 어느 페이지에 있든 친숙함을 느낄 수 있죠. 또 다른 예로, 모바일 앱에서 모든 버튼의 스타일을 통일하는 것도 일관성을 높이는 방법입니다. 사용자는 어떤 요소가 버튼인지 쉽게 인식할 수 있습니다.

    예측 가능성: 디지털 세계의 안정감

    예측 가능성은 마치 익숙한 환경에서 느끼는 편안함과 같습니다. 무엇이 일어날지 알고 있기 때문에 안심하고 행동할 수 있죠. 디지털 제품에서 예측 가능성은 사용자가 특정 행동의 결과를 미리 예상할 수 있게 해주는 것을 의미합니다. 예를 들어, 이메일 앱에서 ‘보내기’ 버튼을 누르면 메일이 전송된다는 것은 누구나 예측할 수 있습니다. 또 다른 예로, 소셜 미디어 앱에서 게시물의 ‘좋아요’ 버튼을 누르면 숫자가 증가하는 것도 예측 가능한 동작입니다.

    이해 가능성: 디지털 세계의 번역기

    이해 가능성은 마치 외국어를 모국어로 번역해주는 통역사와 같습니다. 복잡한 개념을 쉽게 이해할 수 있게 해주죠. 디지털 제품에서 이해 가능성은 사용자가 제품의 기능과 구조를 쉽게 파악할 수 있게 해주는 것을 의미합니다. 예를 들어, 그래픽 디자인 소프트웨어에서 각 도구의 기능을 직관적인 아이콘으로 표현하는 것은 좋은 이해 가능성의 예입니다. 또 다른 예로, 데이터 시각화 도구에서 복잡한 통계 정보를 쉽게 이해할 수 있는 그래프로 표현하는 것도 이해 가능성을 높이는 방법입니다.

    결론: 완벽한 조화를 향한 여정

    사용 용이성과 우아함&명료성은 마치 동전의 양면과 같습니다. 둘 다 중요하며, 어느 하나도 소홀히 할 수 없습니다. 사용하기 쉽지만 보기 싫은 제품, 또는 아름답지만 사용하기 어려운 제품은 모두 완벽한 디지털 경험을 제공하지 못합니다. 최고의 디지털 제품은 이 두 가지 요소를 완벽하게 조화시킵니다. 마치 잘 짜인 오케스트라처럼, 모든 요소가 제 역할을 하면서도 전체적으로 아름다운 화음을 만들어내는 것이죠. 이러한 조화를 이루기 위해서는 디자이너, 개발자, 사용자 경험(UX) 전문가 등 다양한 분야의 전문가들의 협력이 필요합니다.


    실제 사례로 보는 사용성과 아름다움의 조화

    이제 실제 사례를 통해 사용 용이성과 우아함&명료성이 어떻게 조화를 이루는지 살펴보겠습니다.

    애플의 아이폰

    애플의 아이폰은 사용 용이성과 우아함&명료성의 완벽한 조화를 보여주는 대표적인 예입니다.

    사용 용이성 측면:

    • 기능성: 전화, 메시지, 인터넷 검색 등 스마트폰의 모든 기본 기능을 완벽하게 수행합니다.
    • 반응성: 터치에 즉각적으로 반응하여 사용자에게 빠른 피드백을 제공합니다.
    • 편의성: 직관적인 제스처 컨트롤을 통해 복잡한 작업도 쉽게 수행할 수 있습니다.
    • 풀 프루프: 실수로 앱을 삭제해도 쉽게 복구할 수 있는 기능을 제공합니다.
    • 인체 공학: 손에 편안하게 쥐어지는 디자인과 사용하기 쉬운 버튼 배치를 갖추고 있습니다.

    우아함&명료성 측면:

    • 가시성: 홈 스크린의 앱 아이콘들이 명확하게 보이며, 각 기능을 쉽게 찾을 수 있습니다.
    • 논리성: 설정 메뉴가 논리적으로 구성되어 있어 원하는 설정을 쉽게 찾을 수 있습니다.
    • 일관성: iOS의 디자인 언어가 모든 기본 앱에 일관되게 적용되어 있습니다.
    • 예측 가능성: 스와이프, 핀치 줌 등의 제스처가 일관되게 작동하여 사용자가 쉽게 예측할 수 있습니다.
    • 이해 가능성: 복잡한 기능도 단순화된 인터페이스로 제공하여 쉽게 이해할 수 있습니다.

    구글의 검색 엔진

    구글의 검색 엔진 또한 사용 용이성과 우아함&명료성을 잘 조화시킨 사례입니다.

    사용 용이성 측면:

    • 기능성: 웹 페이지, 이미지, 뉴스 등 다양한 형태의 정보를 빠르고 정확하게 검색할 수 있습니다.
    • 반응성: 검색어를 입력하는 즉시 자동 완성 기능이 작동하여 빠른 피드백을 제공합니다.
    • 편의성: 단순한 검색창 하나로 모든 검색 기능을 수행할 수 있습니다.
    • 풀 프루프: 오타가 있어도 “이것을 찾으셨나요?” 기능을 통해 올바른 검색 결과를 제공합니다.
    • 인체 공학: 장시간 검색해도 눈의 피로를 줄이는 색상 scheme을 사용합니다.

    우아함&명료성 측면:

    • 가시성: 검색창이 페이지 중앙에 크게 배치되어 사용자의 주의를 끕니다.
    • 논리성: 검색 결과가 관련성 순으로 정렬되어 있어 원하는 정보를 쉽게 찾을 수 있습니다.
    • 일관성: 모든 구글 서비스에서 동일한 디자인 언어를 사용하여 일관성을 유지합니다.
    • 예측 가능성: 검색 버튼을 클릭하면 항상 검색 결과 페이지로 이동한다는 것을 쉽게 예측할 수 있습니다.
    • 이해 가능성: 복잡한 검색 알고리즘을 단순한 인터페이스로 제공하여 누구나 쉽게 사용할 수 있습니다.

    디지털 디자인의 미래: AI와 개인화

    디지털 디자인의 미래는 AI(인공지능)와 개인화에 있습니다. 이는 사용 용이성과 우아함&명료성의 개념을 한 단계 더 발전시킬 것입니다.

    AI를 활용한 사용 용이성 향상

    AI는 사용자의 행동 패턴을 학습하여 더욱 직관적이고 효율적인 인터페이스를 제공할 수 있습니다.

    • 기능성: AI가 사용자의 니즈를 예측하여 필요한 기능을 선제적으로 제공합니다.
    • 반응성: AI가 사용자의 행동을 예측하여 더욱 빠른 반응 속도를 제공합니다.
    • 편의성: AI 음성 비서를 통해 복잡한 작업도 음성 명령으로 쉽게 수행할 수 있습니다.
    • 풀 프루프: AI가 사용자의 실수를 미리 감지하고 방지합니다.
    • 인체 공학: AI가 사용자의 신체적 특성을 학습하여 최적화된 인터페이스를 제공합니다.

    개인화를 통한 우아함&명료성 강화

    개인화된 디자인은 각 사용자에게 최적화된 경험을 제공하여 우아함과 명료성을 한층 더 강화합니다.

    • 가시성: 사용자가 자주 사용하는 기능을 더 눈에 띄게 배치합니다.
    • 논리성: 사용자의 사용 패턴에 따라 메뉴 구조를 최적화합니다.
    • 일관성: 사용자의 선호도에 맞춘 일관된 디자인 테마를 제공합니다.
    • 예측 가능성: 사용자의 행동 패턴을 학습하여 더 정확한 예측을 제공합니다.
    • 이해 가능성: 사용자의 지식 수준에 맞춰 정보를 제공하여 이해도를 높입니다.
  • 보여야 관리할 수 있다. – 어포던스, 행동유도성

    보여야 관리할 수 있다. – 어포던스, 행동유도성

    보이는 것을 믿게 되며 행동을 유도한다.

    어포던스(행동 유도성, Affordance)라는 말이 있습니다. 개념이 어렵지 일상생활에서 밥먹듯이 경험합니다. 우리 한국인이 읽지 못하는 글 문 앞에 붙어있는 ‘당기시오’ 이것이 어포던스입니다. 그리고 손잡이를 보면 우리는 손잡이를 통해 문을 열려고 합니다. 펜을 보면 얇은 곳으로 쓰려고 합니다. 자연스럽게 우리의 행동을 유도하는 시각적 신호를 우리 UX 용어로 어포던스라고 합니다.

    어포던스를 확복하기 위해서는 기능 간의 절대적인 구분이 필요합니다. 손잡이는 손잡이처럼 생겨야 하며, 키보드는 키보드처럼 생겨야 합니다. 그리고 UI에서 텍스트와 버튼의 시각적 구분은 명확해야 합니다. 손잡이는 돌려서 문을 여는 장치이고, 키보드는 텍스트를 입력하기 위한 장치입니다. UI에서 모든 것이 정보 전달이지만 그중에서도 사용자의 참여를 필요로 하는 경우 시각적 요소가 다른 것을 확인할 수 있습니다.

    하지만 우리가 보이지 않는 공기를 통해 안에 있는 메시지를 확인할 수 있나요? 아니면 수소 원자가 우리에게 메시지를 줄 수 있나요? 사람의 특징적인 것은 감각되어야 행동을 유도할 수 있고, 세상에 실제한다는 생각을 가지게 됩니다. 그래서 이슬람을 제외한 종교 건축물에 신상이 있는 이유도 이러한 이유로 신들이 그곳에 생기게 되는 것입니다.

    두 번째 페이지는 없다.

    디지털 화면에서 첫 번째 보여지는 영역이 말할 수 없이 중요합니다. 사람들은 많은 행동과 의식을 투입해 정보를 얻기 귀찮아하는 것처럼 보입니다. 네이버 첫 번째 화면에 노출되는 광고가 비싸고, 페이지 네이션 두 번째로 노출되는 것이 싼 이유가 여기에 있습니다. 제가 운영했던 디지털 서비스들 대부분이 첫 번째 콘텐츠가 두 번째 콘텐츠보다 많은 참여를 보였습니다. 수치적인 차이는 적게는 3배에서 크면 13배까지 나는 경우를 확인했습니다.

    그래서 일반 영세 사업자들이 배달의 민족이나 플랫폼 사업자에 등록을 하고 나서도 별점에 목숨을 걸고 비용을 더 지불하더라도 상단에 걸리게 하려고 노력합니다. 그것이 매출과 직접적으로 관련되어 있기 때문입니다. 이런 우선순위 배정을 어떻게 하는 것이 정의롭고 모든 사람을 만족시킬 수 있는 방법인지 많은 연구가 이루어지고, 지금도 우리가 사용하는 서비스는 AB테스트를 통해 유의미한 결과를 찾아가고 있는 중입니다.

    메인 페이지와 사용자가 선택해서 들어가는 페이지는 안보이는 두 번째 세 번째 페이지보다 3배 ~ 13배까지 중요하다는 것을 알고 계시면 좋습니다.


    행동유도성 심화

    행동유도성: 사용자 경험을 향상시키는 핵심 요소

    사용자 경험(UX)을 설계하실 때, 저희의 궁극적인 목표는 사용자분들께서 원하시는 것을 쉽게 찾고, 사용하시며, 즐기실 수 있도록 하는 것입니다. 그러나 단순히 사용자분들께서 원하시는 것을 제공하는 것만으로는 충분하지 않을 수 있습니다. 사용자분들께서 실제로 원하시는 행동을 하도록 유도하는 것이 매우 중요합니다. 이것이 바로 행동유도성(Behavioral Nudges)의 역할이라고 할 수 있습니다.

    행동유도성의 정의

    행동유도성이란 사용자분들의 행동을 유도하거나 변경하기 위해 설계된 작은 단서나 힌트를 제공하는 것을 의미합니다. 이는 사용자분들께서 특정 행동을 하시도록 유도하거나, 특정 결정을 내리시는 데 도움을 드리는 것입니다. 행동유도성은 사용자분들의 선택을 제한하지 않고, 스스로 선택하실 수 있도록 돕는 역할을 합니다.

    행동유도성의 역사

    행동유도성의 개념은 2008년 리처드 탈러 교수님과 캐스 선스타인 교수님에 의해 제시되었습니다. 두 분 교수님께서는 행동경제학의 원리를 적용하여 정책결정에 대한 연구를 진행하셨습니다. 그 과정에서 사람들이 항상 합리적인 선택을 하지는 않는다는 점을 발견하시고, 이러한 선택을 개선하기 위해 행동유도성을 제안하셨습니다.

    행동유도성의 유형

    행동유도성은 다음과 같은 여러 유형으로 분류할 수 있습니다:

    1. 기본 설정(Default): 사용자분들께서 특정 행동을 하시도록 기본 설정을 제공하는 것입니다. 예를 들어, 앱을 설치하실 때 기본적으로 위치 서비스를 활성화하도록 설정할 수 있습니다.
    2. 시각적 힌트(Visual Cue): 사용자분들께서 특정 행동을 하시도록 시각적으로 힌트를 제공하는 것입니다. 예를 들어, 버튼을 클릭하실 때 버튼의 색상이 변경되도록 설정할 수 있습니다.
    3. 피드백(Feedback): 사용자분들께서 특정 행동을 하신 후에 피드백을 제공하는 것입니다. 예를 들어, 로그인에 성공하셨을 때 성공 메시지를 표시해 드릴 수 있습니다.
    4. 인센티브(Incentive): 사용자분들께서 특정 행동을 하실 때 인센티브를 제공하는 것입니다. 예를 들어, 특정 행동을 하셨을 때 포인트를 드릴 수 있습니다.

    행동유도성의 적용

    행동유도성은 다양한 분야에서 적용할 수 있습니다:

    1. 웹사이트: 사용자분들께서 특정 행동을 하시도록 유도하는 것입니다. 예를 들어, 뉴스레터를 구독하시도록 유도할 수 있습니다.
    2. : 사용자분들께서 특정 행동을 하시도록 유도하는 것입니다. 예를 들어, 앱을 사용하실 때 특정 기능을 사용하시도록 유도할 수 있습니다.
    3. 게임: 사용자분들께서 특정 행동을 하시도록 유도하는 것입니다. 예를 들어, 게임을 플레이하실 때 특정 아이템을 사용하시도록 유도할 수 있습니다.
    4. 마케팅: 사용자분들께서 특정 행동을 하시도록 유도하는 것입니다. 예를 들어, 특정 제품을 구매하시도록 유도할 수 있습니다.

    행동유도성의 장점

    행동유도성은 다음과 같은 여러 장점을 가지고 있습니다:

    1. 사용자 경험 개선: 사용자분들께서 원하시는 행동을 하시도록 유도함으로써 사용자 경험을 개선할 수 있습니다.
    2. 변화율 증가: 사용자분들께서 특정 행동을 하실 때 인센티브를 제공함으로써 변화율을 증가시킬 수 있습니다.
    3. 비용 절감: 사용자분들께서 특정 행동을 하실 때 자동화된 프로세스를 제공함으로써 비용을 절감할 수 있습니다.

    행동유도성의 단점

    행동유도성은 다음과 같은 단점도 가지고 있습니다:

    1. 사용자 반발: 사용자분들께서 특정 행동을 하시도록 강제할 경우 반발을 초래할 수 있습니다.
    2. 사용자 혼란: 사용자분들께서 특정 행동을 하실 때 혼란을 느끼실 수 있습니다.
    3. 사용자 의존성: 사용자분들께서 특정 행동을 하실 때 의존성이 생길 수 있습니다.

    결론

    행동유도성은 사용자 경험을 향상시키는 중요한 요소입니다. 사용자분들께서 원하시는 행동을 하시도록 유도함으로써 사용자 경험을 개선할 수 있습니다. 그러나 행동유도성을 설계하실 때는 사용자 반발, 혼란, 의존성 등을 충분히 고려하셔야 합니다. 행동유도성을 잘 설계하시면 사용자 경험을 개선하고, 변화율을 증가시키며, 비용을 절감하실 수 있습니다.

  • 조심해야할 논리오류 10가지

    조심해야할 논리오류 10가지

    서비스 디자인을 하던 UX 디자인을 하던 공급자와 사용자가 어느정도 분리된 공간에서 서비스를 만들고 그러다보니 설계의 오류가 발생하는 경우가 있습니다. 아래 열가지 사례를 주의하면 심각한 문제는 피할 수 있습니다.


    설계적 오류

    오류가 없는 프로그램 혹은 서비스는 있을 수 없습니다. 하지만 설계 오류 혹은 논리 오류는 너무나 큰 문제를 초래합니다. 이상하다 하면서 기획자가 잘못 정의를 하게 되면, 디자인에서 틀어지고, 디자인에서 틀어지면, 퍼블에서 틀어지고, 퍼블에서 틀어지면 개발에서 틀어집니다. 주의를 기울여 설계 오류를 봐야한다. 하지만 설계 오류는 아리스토텔레스의 논리적 오류를 차용하면 좀 더 쉽게 오류를 관리하고 문제를 덜 일으킬 수 있다.
    아리스토텔레스는 크게 보면 오류를 두가지로 구분했는데, 아래의 예시 형식 오류 = 논리 오류, 비형식 오류 = 문법 오류이다.

    형식 오류 (논증, 논리)

    • 입증되지 않음의 오류
    • 매몰 비용의 오류
    • 밴드왜건 오류
    • 시간에 호소
    • 숨은 의도가 있는 질문
    • 체리피킹
    • 상관, 인과관계 오류
    • 후광 효과
    • 투쿼크 오류
    • 참신함 호소

    비형식 오류 (내용, 문법)


    1. 입증되지 않음의 오류(Anecdotal fallacy)

    입증되지 않은 오류는 여러분의 개인적 경험을 증거로 생각하는 오류입니다. 과학적으로 개인적 경험은 타당한 증거가 될 수 없습니다. 그 이유는 한 개인의 한계때문에 그렇습니다. 그 예로는 기억의 왜곡, 가치 판단의 착오 등 한 사람이 여러 사람과 함께 있을 때 인식하는 것과 개인이 있을 때 경험한 것이 다르기 때문에 왜곡의 여지가 많습니다. 서비스를 설계하는 여러분들은 한 사람으로서 경험을 강력한 증거로 간주해서는 안 됩니다. 이는 유저의 입장에서 공감하는 능력을 상실할 수 있기 때문입니다. 하지만 우리는 우리의 몸을 벗어날 수 없기 때문에 우리가 기준이 되나, 다른 타인도 관찰하고 타인의 관점으로 생각하는 능력을 길러야 합니다.

    방지책: 개인적 선호에 의존하기보다는 항상 증거, 데이터, 그리고 유저 리서치 통해 사용자 관점의 인사이트 발굴을 위해 노력해야 합니다.

    2. 매몰 비용의 오류(Sunk cost fallacy)

    노력한 만큼 결과물에 애정이 생깁니다. 하지만 앞서 설명한 것 처럼 처음부터 설계가 잘못된 것을 계속해서 진행하고 있다면 크게 벌어져있을 것입니다. 따라서 작업한 결과물에 애정이 생기겠지만 애정을 떼고 객관적으로 볼 수 있어야 합니다. 그러기 위해서는 동료의 눈을 빌리고 객관적으로 이야기해달라고 한 다음 최대한 애정을 버리고 객관적으로 보도록 노력해야 합니다. 그래야 사용자의 눈으로 세상을 바라볼 수 있습니다.

    3. 밴드왜건 오류(Bandwagon fallacy)

    더 많은 사람들이 픽이 좋은 결과일 것이라고 생각하는 것입니다.

    4. 시간에 호소(Appeal to time)

    오랜 시간 존재했기 때문에 옳은 것이며 지켜야 한다는 오류를 말합니다.

    5. 숨은 의도가 있는 질문(Loaded question)

    사용자의 관점을 객관적으로 파악하기 위해서는 반드시 물어볼때 객관적으로 물어봐야 합니다.

    6. 체리피킹(Cherry Picking)

    당신의 가설에 긍정적인 데이터를 선택하는 연구의 데이터 수집 과정입니다.

    7. 상관, 인과관계 오류(Co-relation causation fallacy)

    원인과 결과를 잘못 매칭하는 경우에 발생하는 오류입니다.

    8. 후광 효과(Halo effect)

    후광 효과는 한 분야에서 사람, 기업, 브랜드, 또는 제품에 대한 긍정적 인상이 다른 분야에서 자신의 의견이나 감정에 긍정적인 영향을 미치는 경향을 말합니다.

    9. 투쿼크 오류(Tu quoque fallacy)

    누군가 실수나 이슈를 이야기할 때, 같은 사람이 과거에 그런 실수를 했다는 것을 근거로 그 점을 거절하는 것을 말합니다. 누가 말했는지는 중요하지 않다, 중요한 건 무엇이 옳고 그른지에 관한 것입니다.

    10. 참신함 호소(Appeal to Novelty)

    참신함에의 호소는 단지 참신해 보이기 때문에 다른 것들보다 더 좋다고 가정될 때 발생하는 오류를 말한다.

  • 인터뷰 — 유저 리서치

    인터뷰 — 유저 리서치

    ‘면접’, ‘최종 면접’ 이 두 단어는 사람을 참 떨리게 하는 단어입니다. 뭘 어떻게 해야할지도 모르겠고, 하고 나서도 잘 했는지도 모르겠는 그런 상황이 저 두 단어에 녹아있습니다. 최근 면접에서 계속 좋은 소식을 듣지 못했는데, 운이 좋아서 좋은 기업에 취직을 하게 되었습니다. 하지만 제가 질문자의 입장이 되어야 할 때, 어떻게 하면 좋을까요?

    인터뷰, 면접, Focus Group Interview 등 상황에 따라 많은 변수를 통제해가면서 사용자의 의견을 직접 들을 수 있습니다. 무엇보다 중요한 것은 사용자의 솔직한 의견을 이끌어낼 수 있는 환경을 만드는 것입니다. 항상 이야기했지만 방식보다 메시지가 중요하고, 방식보다 환경이 더 중요합니다. 사자가 옆에서 뛰어 노는 환경에서 사용자의 앱 서비스 평가를 할 수 있을까요? 반대로 자연스럽게 의견을 들을 수 있는 상황이면 이야기하지 않아도 이야기 할 수밖에 없을 것입니다.

    사용자가 솔직하게 이야기할 분위기를 만들어 봅시다. 그 중 비대면 시대에 줌이나 웹엑스 등을 활용해서 주로 사용하는 개별 인터뷰에 대해서 알아보겠습니다.


    개별 인터뷰

    개별 인터뷰에서는 면접관이 한 명의 사용자와 30분 ~ 1시간 동안 이야기합니다. 개별 인터뷰를 통해 그들의 태도, 신념, 욕구 및 경험을 조사하여 서비스를 방문하는 사용자를 더 깊이 이해할 수 있습니다. 서비스에 대한 선택 항목을 평가하거나 순위를 매기도록 요청할 수도 있습니다. 이러한 인터뷰는 대면, 전화 또는 화상 회의 또는 인스턴트 메시징 시스템을 통해 이루어질 수 있습니다.

    개별 인터뷰 실시 시기

    이상적으로는 서비스의 목적와 목표를 개발하거나 검토하는 동안 개발 주기가 시작될 때 인터뷰가 이루어집니다. 온라인 설문 조사를 보완하기 위해 인터뷰를 사용할 수도 있습니다. 설문 조사 전에 인터뷰를 수행하면 설문 조사에 대한 질문을 구체화하는 데 도움이 됩니다. 설문 조사 후 참가자를 인터뷰하면 사용자가 설문 조사에 대해 제공한 답변에 대한 세부 정보와 이유를 조사할 수 있습니다.

    개별 인터뷰 수행을 위한 모범 사례

    • 무엇을 배우고 싶은지 다음 사항을 고려하십시오.
    • 면접관이 따라야 할 면접 프로토콜을 작성합니다. 프로토콜에는 후속조치에 사용할 질문과 조사가 포함됩니다.
    • 면접관을 편안하게 만드는 방법을 알고, 중립적인 방식으로 질문하고, 잘 경청하며, 자세한 내용을 조사할 시기와 방법을 알고 있는 숙련된 면접관을 고용합니다.
    • 세션을 녹화하고 한 명 이상의 메모를 작성할 수 있는 권한 얻기

    개별 인터뷰가 다른 방법과 어떻게 다른지

    이러한 인터뷰는 사용자 작업을 관찰하는 것이 아니기 때문에 사용성 테스트에서 사용자를 인터뷰 하거나 맥락 인터뷰를 수행하는 것과 다릅니다.
    개별 인터뷰는 사용자와의 대화가 포함된다는 점에서 포커스 그룹과 유사하지만 개별 인터뷰에서 다음과 같은 점에서 다릅니다.

    • 한 번에 한 사람과만 대화
    • 주제에 대해 자세히 논의할 시간을 더 많이 가지세요.
    • 포커스 그룹에서 필연적으로 발생하는 그룹 역학에 대해 걱정할 필요가 없습니다.
    • 인터뷰 대상자에게 최대한 주의를 기울이고 인터뷰 대상자의 요구에 맞게 인터뷰 스타일을 조정할 수 있습니다.