카테고리 보관물: Web Marketing

사용자를 생각하게 하지마!

내 서비스를 다른 서비스 보다 사랑받는 서비스로 만들고 싶은 고민을 하고 있다면 한번 읽어 보세요!
저도 읽고 싶었는데 계속 회사 일에 치어서 몇장 못보다 휴가를 몇일 내고 하루 몰아서 보았네요

주된 내용은 “수많은 사이트들 중에 왜 내가 만든 서비스를 사람들이 써야 하는가“란 질문을 던지고 직관적인 서비스를 만들기 위해 유의할 점과 사용성 평가 방법들에 대해 소개하고 있습니다.

아래 내용은 책 내용을 일부를 메모 한거에요~

[훑어보기]
  • 잘 만들었다고 생각하면 임의로 던저진 페이지에서 평가하라.

    1. 이사이트는 무슨 사이트인가? (사이트 ID 로고)
    2. 내가 지금 무슨 페이지에 있는가? (페이지 이름)
    3. 이 사이트의 GNB 섹션은 무엇인가? (상단 메뉴)
    4. 현재 페이지의 내비게이션 상태는 어떠한가 (로컬 네비)
    5. 전체 사이트 구성에서 현재 위치는 어디에 해당하는가 (‘현재위치 표시’)
    6. 검색은 어떻게 하는가?
  • 중요한 메시지는 이렇게 전달하라 
    • 테그라인
      사이트ID바로 옆 공간은 몸값이 가장 비싼 곳 중 하나다. 사이트 로고에 시각적으로 연결된 문구가 테그라인이며이 문구가 사이트 전체를 설명한다는 사실을 안다. 좋은 테그라인은 충분한 내용을 담고 있되 과하게 길지 않아야 하고 6~8 단어 정도가 적당.
    • 환영문구
      환영 문구는 사이트를 간단하게 설명하는 문구다. 홈페이지 상단 왼쪽이나 중앙의 콘텐츠 부분처럼 홈페이지에서눈에 잘 띄는 자리에 놓이므로 방문자의 시선을 처음에 사로 잡는다.
    • 더보기
      혁신적인 제품이나 비즈니스 모델은 일정 분량의 설명을 필요로 하는 경우가 많다.
      일반 사용자는 통상적으로 그런 설명을 끝까지 읽을 정도로의 인내심을 보이지 않는다.
    • 필요한 만큼 공간을 마음껏 사용하라.
      어떤 사이트인지 이해하지 못하는 사용자가 있다는 걸 인지하고 사이트의 주된 서비스 나 목적을 알 수 있게 적절히 설명해야 한다.
    • 필요 이상의 공간을 사용하지 마라.
      기본적인 내용을 전달하는데 굳이 넓은 공간을 쓰지 않아도 되는 사이트가 대부분이다. 그리고 홈페이지 전체를 메시지 전달에 할애하면 사용자의 몰입도가 떨어지기 쉽다. 메시지는 간견하게 전달하라. 요점을 전달할 정도면 충분하니 일부러 길게 만들지 마라. 좋은 특징을 모두 나열할 필요도 없다. 중요한 몇 가지만 언급하라.
    • 기업 강령을 환영 문구로 사용하지 마라.
      미스 아메리카 결슬에 오른 후보라도 되는것처럼 홈페이지에 기업강령을 적어 좋는 경우가 많다. "XYZ사는 급성장하고 있는 무슨 무슨 분야의 문제들에 대해 세계적인 수준의 해결책을 제공합니다...” 하지만 그런 글을 아무도 읽지 않난다.
  • 사이트 구조 참고

  • 홈페이지에 전체적인 그림을 설명하지 않을 때 갖다 붙이는 그럴듯한 변명 TOP4

[사용성 평가]
  • 사용성을 정의 할 때 핵심적인 속성으로 항상 세가지를 꼽는다.
    1. 평균수준(심지어 평균 이하)의 능력의나 경험을 가진 사람이 무언가를 성취하는데 [유효성]
    2. 사용할 특정 물건의 사용법을 스스로 알아낼 수 있어야 한다. [학습 용이성]
    3. 단, 얻는 가치에 비해 수고를 적게 들여야한다 [효율성]
  • 사용성 평가에 대한 몇 가지 진실
    • 훌륭한 사이트를 만들려면 반드시 평가해야 한다.
    • 평가 참가자가 한명 뿐이어도 좋다. 그렇게라도 평가를 하는 편이 아예 안하는 것보다 100% 낫다.
    • 프로젝트 초기에 진행한 평가가 프로젝트 후반에 진행한 평가보다 낫다. 설사 초기 평가 대상자가 1명뿐이고 후기 평가 대상자가 50명이 된다고 하더라도…
  • DIY 평가 방법

    DIY 평가 방법

  • 평가 주기는 어느정도가 좋을까?
    • 단순하므로 지키기 쉽다
      한달에 한번 오전 한나절 정도의 시간이 평가를 위해 팀원 다수가 함께 낼 수 있는 시간의 한계.
    • 그 정도면 필요한 내용을 얻을 수 있다
      사용자 3명을 관찰해서 얻은 결과만으로도 다음 달 평가 전까지 팀원을 바쁘게 할 만한 충분한 양의 업무가 생길것이다.
    • 언제 평가할지 결정하는 수고를 덜어준다
      매달 세번째주 목요일 처럼 주기적인 일정을 정하는것이 바람직하다. 특정 업데이트전에 하는것이 아니라 매달 하더라도 매번 개선할 사항들은 나오기 마련이기에 평가할 내용이 부족할 일은 없을 것이다.
    • 사람들의 참석률이 높아질 확률이 높다
      정해진 일정에 따라 오전 시간만 들이는 거라면 시간 내기가 비교적 쉽다
    • 평가는 어디서 하는가?
      함께 점심 식사를 하며 수집된 정보를 가지고 크리티컬한 문제부터 이야기 하라.
  • 사용자는 몇 명이 필요한가?
    • 3명이면 충분하다.
    • 이러한 평가의 목적은 무언가 증명하는것이 아니다.
      무언가 증명하라면 정량적인 평가가 필요하다. 하지만 DIY평가는 정성적인 방법을 사용한다. 본인들이 만드는 것을 개선하기 위해 사용성 문제를 찾고 고치는 것이 평가의 목표다. 그 과정은 엄격과 거리가 멀다. 참가자에게 해야 할 일을 주고 그들을 관찰하면서 배운다. 실행으로 옮길 수 있는 통찰을 얻기 위해 하는 것이다.
    • 모든 문제를 찾을 필요는 없다.
      사실 평가를 통해 모든 문제를 찾는 것은 불가능한 일이다. 그리고 만약 찾는다고 해도 여러분에게 도움이 되지 않느다. 그 이뉴는 “한나절 동안 찾은 내용만으로도 한 달 작업량은 채우고 남는다
    • 참가자 모집에 너무 많은 에너지를 쏱지 말고 상대평가하라.
      전문분야 종사자도 좋지만, 일반 사용자도 사이트를 개발 의도에 맞게 적절하게 사용할 수 있어야 한다.
  • 평과과제는 어떻게 정하는가?

    평과과제는 어떻게 정하는가?

[참고]
  • 어포던스란
    제품 디자인에 내포된 사용자가 어떻게 사용하면 될지 알려주는 시작적인 힌트를 가리킨다.
    예) 아 이건 버튼이구나, 입력 인풋 이구나 당연히 알 수 있도록 하는것 시각적 힌트
  • 빵부스러기 (Bread-crumb) 메뉴
    아이를 버리는 새엄마의 계획을 알고 헨젤이 숲 속에 빵부스러기를 뿌려서그레텔과 함께 집으로 돌아오는 길을 찾을 수 있었다는 것에서 유례
  • 공유지의 비극
    공유된 자원은 남용 때문에 바드시 파괴된다.
  • 사용자 테스팅 – 결과 전달 서비스 (www.usertesting.com)

2년간의 브라우저 점유율 변화

브라우저 점유율
2년간의 브라우저 점유율 변화 http://gs.statcounter.com/#browser-ww-monthly-201311-201511

 13년 11월 ~ 15년 11월 브라우저 점유율 변화 (데스크톱, 테블릿)
  1. 크롬: 약 41% 에서 54%로 13% 상승
  2. IE:       약 27% 에서 15%로 12% 하락
  3. 파폭: 약 18% 에서 14%로 4% 하락
  4. 사파리: 약 8% 에서 9%로 1% 상승
  5. 오페라: 약 2% 미만

2년간의 브라우저 점유율 변화 참고하세요.

이메일 템플릿 만들기

본 가이드는 이메일 템플릿을 쉽게 제작 할 수  있는 서비스를 소개하고 유의 할 점들을 공유 합니다.
 
[이메일 템플릿 만들기를 도와주는 무료 서비스]
[작업시 유의사항]
  1. HTML작업시 Table 마크업! (기존 레이아웃 잡는 Block 요소 인식 못하는 이메일 클라이언트 서비스 때문)
  2. 스타일 시트를 별도 파일로 구성하면 인식 못하는 메일 서비스도 있기때문에 페이지내 포함하거나, Inline으로 작성한다.
  3. 작업후 서비스별 이메일 클라리언트의 랜덩링이 다르기 때문에 테스트 가능한 메일 서비스는 모두 테스트 한다.
  4. 메일별 결과 체크 리스트를 만들어서 브라우저별 서비스별 테스트 진행해야 한다.
[국내 필수 테스트 메일]
  • 다음, 네이버, 네이트, 구글, 아웃룩
[참고]

절대 지켜져야만 하는 UI 디자인의 7가지 법칙 (퍼온글)

당신은 웹 디자이너인가요? 만약 그러하다면 당신은 UI 디자이너라는 말이기도 합니다. 그리고 미래에는 오히려 그 UI 디자이너라는 호칭이 웹 디자이너라는 이름보다 더욱 중요해질지도 모릅니다.

오늘날의 웹페이지들이 네비게이션과 메뉴 정도 만을 남긴 간단한 인터페이스라면, 기술의 발전으로 인해 우리가 앞으로 겪게 될 인터페이스는 아마 지금보다 더 유동적이고 개인에 최적화된 것들을 요구하게 될 것입니다.

피할 수 없이 받아들여야만 하는 이 흐름은, 우리가 UI 작업을 더욱더 세밀하게 해야 한다는 것을 의미합니다.
자, 그럼 우리가 정확히 어떤 것들을 기억해야 하는지 살펴보도록 하겠습니다.

1. 명확성의 법칙(Law of clarity)

유저는 확실한 의미전달이 되지 않는다면 그 인터페이스를 사용하려 하지 않습니다.

혹시 지메일(Gmail)을 사용하고 계신가요? 저는 사용한지 좀 되었는데요. 최근 업데이트 이전까지만 하더라도 페이지 상단에 굉장히 명확한 텍스트 형식의 네비게이션 바를 달았었죠. 구글 캘린더, 드라이브, 시트 등 여러 구글 서비스들을 버튼 클릭 한번으로 사용 할 수 있게 되어 있었습니다.

그런데 구글은 갑자기 애매모호한 아이콘 하나로 모든 것을 ‘단순화’ 하고자 하였습니다. 결과적으로는 대부분의 사람들이 그 아이콘을 알아보지 못했고, 지메일은 결국 유저들의 원성을 들어야만 했죠.

사람들은 자신들이 이해하지 못하는 것들은 대부분 바로 지나쳐버립니다. 그건 인간의 자연적인 본능이죠. 어떤 기능인지 추측할 수 없는 인터페이스는 피하세요. 다들 그게 무엇인지 굳이 알고 싶어하지 않을 겁니다.

 

2. 우선순위의 법칙(Law of preferred action)

작업의 우선순위가 무엇인지 알 수 있다면 유저로서는 훨씬 더 수월해집니다.

위의 트위터(Twitter) 화면을 보세요. 새로운 유저가 이 화면을 본다면 무엇부터 해야 한다고 생각할까요?

물론 순서대로라면 트위터에 글부터 써야 하겠죠. 하지만 오른쪽 상단에 ‘새 트위터 작성하기’ 버튼은 상당히 명확하지 않습니다(1번 명확성의 법칙을 보세요). 그리고 왼쪽 사이드바에 있는 ‘새 글 입력창’은 또렷하게 드러나지 않고 배경색에 묻혀 버리기까지 하죠.

온전히 디자인적 시각으로만 바라보았을 때, 트위터에서는 아무래도 유저들이 검색을 하기를 바라거나 왼쪽 상단의 네비게이션 메뉴를 사용하기를 바라는 것 같습니다. 저 요소들이 가장 유명하니까요.

유저들로 하여금 다음에 무엇을 해야 할지 고민하게 만들어서는 안 됩니다. 우선순위는 반드시 확실해야만 합니다.

 

3. 문맥의 법칙(Law of context)

유저는 자신이 수정하고 싶은 내용의 설정 인터페이스(버튼)가 문맥상 그 내용 가까이에 있기를 원합니다.

여러분은 페이스북(Facebook)에서 이름을 어떻게 수정하시나요? 오른쪽 상단의 설정에 들어간 후, 계정 설정에 들어가서, 이름을 찾아서 클릭하고, 수정 버튼을 누를 겁니다. 링크드인(LinkedIn)에서는 어떻게 이름을 수정할 까요? 이름 옆에 연필 모양 버튼을 클릭하면 끝입니다.

유저들은 항상 인터페이스가 자신들이 수정하고 싶은 내용 옆에 있기를 원합니다. 이것은 실생활에서도 마찬가지로 적용되죠. 옥수수로 팝콘을 해먹고 싶다면, 전자레인지로 가서 전자레인지에 달려있는 버튼을 누르겠죠.

만약 전자레인지가 당신에게 계단을 내려가서, 지하실 문을 열고, 전기통을 열어서, 그 안에 있는 G-35버튼을 클릭하여 팝콘 프로그램을 가동해야 한다고 한다면(페이스북의 이름 바꾸는 작업과 비슷하다고 할 수 있죠) 상당히 편리하지 않을 겁니다.

유저들을 위해 간단하게 배치하세요. 무언가가 수정, 변경, 혹은 설정이 가능한 요소라면 그 설정 버튼을 문맥상 바로 그 옆에다가 둘 수 있도록 하세요.

 

4. 기본 설정의 법칙(Law of defaults)

유저는 거의 대부분 기본설정을 바꾸지 않을 겁니다.

이 전화 벨소리에 익숙하신가요? 당연히 익숙하실 겁니다. 한때 지구상에서 가장 유명했던 벨소리이니까요. 왜냐구요? 그건 이 벨소리가 핸드폰에 기본으로 설정된 벨소리였고 대부분의 사람들이 바꾸지 않았기 때문이죠.

기본 설정이 얼마나 강력한지는 아래 예시만 보아도 알 수 있습니다.
– 대부분의 사람들은 기본으로 설정된 배경화면과 벨소리를 그대로 사용한다.
– 대부분의 사람들은(당신을 포함하여) 집 TV 세트의 기본설정을 수정하여 사용하지 않는다.
– 대부분의 사람들은 기본 설정된 냉장고 온도를 바꾸지 않는다.

기본 설정은 눈에 크게 띄지는 않지만 이미 우리 세상을 지배하고 있습니다. 그러니 반드시 기본 설정이 최대한 간편하고 효율적일 수 있도록 해주세요. 아마 대부분의 사람들은 그것을 바꾸지 않을 테니까요.

 

5. 유도의 법칙(Law of guided action)

유저는 당신이 어떠한 행동을 유도한다면 아마 그렇게 할 겁니다.

유저가 무언가 하기를 ‘기대’하는 것과 실제로 그것을 ‘요청’하는 것은 다릅니다.

예를 들어 처음 링크드인에서 추천(endorsement) 기능을 만들었을 때, 이 기능이 무엇인지에 대해서 유저들 스스로 알아내기를 바라지는 않았습니다.
대신 그들은 눈에 명확하게 띄는 추천 배너를 오른쪽 상단에 나타나도록 하였죠. 여기에 ‘사람은 기본적으로 서로 추천하는 것을 좋아한다’는 사실이 더해져서 결국 이 기능을 큰 성공으로 이끌었습니다.
여기서 우리가 배울 수 있는 것은, 만약 유저가 무엇인가를 하기를 바란다면 주저하지 않고 ‘물어봐야 한다’는 것입니다.

 

6. 피드백의 법칙(Law of feedback)

유저는 당신이 명확하고 지속적인 피드백을 줄 때 더욱 확신을 가지게 됩니다.

이것은 아주 간단한 규칙입니다. 인터페이스가 유저에게 더 지속적으로 커뮤니케이션 할 수록, 유저는 더욱 확신을 가질 수 있습니다.

지메일은 좋은 피드백 기능을 가진 서비스의 훌륭한 예입니다. 여러분이 하는 모든 행위에서 지속적인 피드백을 받을 수 있습니다. 더 알아보기(Learn more), 되돌리기(undo), 기능을 통해서는 더 깊이 배울 수도 있죠. 이것은 유저 자기 자신이 인터페이스를 통제하고 있다는 느낌을 주고 더불어 제품을 다시 사용하고 싶다는 확신을 줍니다.

 

7. 간편함의 법칙(Law of easing)

유저는 복잡한 과제라 하더라도 단계별로 나누어 간편하게 주어진다면 그것을 실행 할 확률이 높습니다.

왼쪽과 오른쪽의 양식을 비교해보세요. 둘 다 비슷한 양의 항목이 있지만 오른쪽이 훨씬 더 작성하기가 편하죠.

우리 모두는 길고 복잡한 형태의 양식은 지겹고 번거롭기 때문에 싫어합니다. 하지만 그것을 상단의 메뉴에 둘로 나누어 놓는다면, 훨씬 더 관리하기가 쉬워지죠.

이것이 바로 간편함의 법칙입니다. 사람들은 차라리 하나의 큰 과제보다는 10개의 작은 과제를 해결하려 합니다. 작은 과제들은 우리가 힘들다고 느끼지 않게 해 줄 뿐더러, 과제를 해결 할 때마다 성취감을 주기도 하죠.

 

과연 이것들은 ‘유의사항’일까요, 아니면 반드시 지켜야 할 ‘법칙’일까요?

제가 위에서 단호하게 ‘법칙’이라는 단어를 사용한 이유가 있습니다.
이 법칙들을 위반 했을 시 단 한번도 좋은 결과가 나오는 것을 보지 못했기 때문이죠.
반농담이지만, 이 법칙들을 어길 시에는 항상 나쁜 결과가 따릅니다. 그것은 주로 이 불쾌한 인터페이스에 대해 성난 유저들이죠.
UI 디자인은 아주 세밀하고 책임이 막중한 작업입니다. 위의 법칙들은 그 역할을 수행하는데 있어 조금이라도 도움이 될 겁니다.

만약 이 7가지 UI 디자인 법칙들을 어기고자 한다면, 반드시 그에 합당한 이유가 있기를 바랍니다.

 

[원문7 unbreakable laws of user interface design by Peter Vukovic
본문은 99 Designs의 Peter Vukovic가 작성한 ‘7 unbreakable laws of user interface design‘을 원작자의 동의하에 번역 및 게시한 글입니다.