Difference between revisions of "UX 모임 2018-10-22"

Revision as of 22:09, 14 October 2018

UX 모임

선애

RULE5 감성으로 접근하라

핵심콘텐츠에 집중하라

• 먼저, 제품을 구성하는 콘텐츠, 요소의 가치를 평가하는 기준과 관점을 판단

• • 기능성 : 기능적인 측면에서 전체 제품에 이바지하는 정도와 특성. 핀터레스트
  • 정체성 : 제품의 특징이나 개성을 기억시키는 요소. 구글
  • 사용성 : 정확성과 보안성이 필요한 서비스에서는 매우 중요. '언제, 어디서나, 쉽게' 페이팔
  • 사업성 : 경제적 가치를 얻기 위한 것이라면 목적에 충실히 설계. IMDb 로튼토마토

• 제품을 구성하는 기능과 내용을 이와같이 네가지 관점에서 평가할 수 있음. 같은 요소라도 상황에 따라 역할과 중요성을 판단할 수 있어야 함.

메시지를 디자인하라

XMB 인터페이스

Dead Space

• 시각디자인(Visual Communication Design) : 시각요소를 활용하여 소통하는 방법을 디자인.
• 메시지는 의미와 함께 넓고 큰 흐름과 전달방식으로 드러남.
• 하나의 기호체계로써 의미를 가지는 디자인은 언어적인 요소로 사용해도 좋음.
• 스큐어모피즘(Skeuomorphism) : 현실세계를 은유한 본래의 형태로 표현하는 것.
• UI에서 아이콘을 사용할 때에는 사람들에게 익숙한 디자인을 활용하는 것이 좋음.
• 새로운 인터페이스는 참신한 디자인으로는 안되고 사용자가 받아들일 수 있는 새로운 콘셉트를 이용해야함.
• 게임은 모든 구성요소에서 사용자의 즐거움을 추구. 게임UI는 일관성 있는 자극과 동기부여 요소이며 감성적으로도 몰입과 흥미를 강화하는 도구.
  • Dead Space, 타이탄 폴, 모뉴먼트 밸리 등
• 아이콘 디자인의 선구자 Susan Kare

개성과 분위기를 표현하라

• 시각 디자인에 더해 유기적으로 콘셉트, 기능과 함께 여러가지 요소가 결합되어야 감성적인 경험이 완성됨.
• 디자인에 톤이나 분위기, 목소리를 표현하기 위한 여러가지 방법
  • 색 ex) Cuphead, Limbo 등
  • 질감
  • 배치 ex) playground c-21
  • 이미지 스타일 : 사진, 초상화, 도식화, 스케치 등

움직임을 표현하라

• 기존에는 애니메이션 효과로 피드백을 주는 방식이 기술적인 문제로 회피되어옴.
• 그러나 터치 인터페이스가 일반화되고 스마트폰의 성능이 향상되면서 움직임의 중요성이 커짐.
  • 위치, 속도, 방향 : 모든 움직임은 위치와 속도, 방향을 가짐. 이를 활용하여 표현 가능.
  • 겹침 : 두가지 이상 개체에 공통요소를 만듦. ex) 앱 서랍 기능
  • 패턴 동작 : 터치 인터페이스를 활용. 스와이프.

친절한 디자인을 하라

• 친절한 디자인 : 정보의 핵심을 알아듣기 쉽고 정서적으로도 안정감 있게, 따뜻한 기분이 드는 소통과정처럼 디자인에 배려를 담는 것
• 논리적인 접근 : 사용성 최적화를 통해 제품의 핵심기능을 제대로 전달하며 정확한 정보를 유용하게 제공.
• 인지적인 접근 : 기억에 남는 경험은 사용자가 상황에 집중하고 몰입해야 가능. 몰입은 사용자가 부담없이 자신의 욕구에 집중하여 원하는 것을 탐색할 때에 가능.
  • 장기기억(LTM, long term memory) : 우리가 기억하는 많은 경험.
  • 단기기억(STM, short term memory) : 지속시간 10-20초, 동시처리 정보갯수 5-7개
• 감성적인 접근 : 친절함의 감성(편안함, 안정감, 배려, 안심 등). 시각요소와 청각요소 등을 활용. ex) OmmWriter
• 친절한 디자인은 디자이너의 실제 사용자에 대한 이해가 필수적.

소리로 전달하라

• 사람의 오감은 개별적으로 작동하지 않고 동시에 전체적인 직관을 형성. 소리는 필수적인 요소.
• 칵테일 파티와 주의 집중
  • 칵테일 파티(Cocktail Party) 효과[선택적 지각(Selective Perception) : 주변환경이 소음으로 가득해도 주의를 집중하여 원하는 소리를 듣는것.
  • UX디자인의 소리는 다른 소리와 분명하게 구분하고 직관적이어야 하며, 객관적인 정보를 담을 수 있어야 함.
• 소리 정보의 활용
  • 직관적인 소리
    • 인공적인 소리를 디자인하기 전에 직관적인 소리 정보를 얻고 활용해야 하는 점을 이해해야함.
    • 직관적인 소리는 대부분 경험을 통해 축적되어 상황과 소리는 자연스러운 관계를 가짐.
    • ex) 크리스털와인잔, 금속 자물쇠, 애플사의 Mighty Mouse, 시리얼, 구급차 등
    • 직관적인 소리는 정보를 빠르게 전달. 기본적으로 직관성을 보장할 수 있는 범위에서 창의성을 발휘해야 함.
  • 메시지를 담는 소리
    • 쉽게 말해 대화하는 것. 모든 종류의 메시지는 상호간에 소통하는 공통점이 필요.
    • 명확하고 효율적으로 메시지를 전달하기 위해서는 쉽고 단순한 단어를 사용하고 메시지의 의미도 한가지로 제한.
    • 언어 : 서로 이해할 수 있는 하나의 언어
    • 환경적 특성 : 지리적 환경 뿐만 아니라 시간, 기후, 문화적 환경 등 사용자의 다양한 환경요소 고려
    • 절차적 연관성 : 서로간에 절차의 흐름을 정확하게 공유. ex) ARS
• 음향정보의 특성
  • 선형성 : 소리는 선형적. 주의 집중과 메시지를 이해하는 데 필요한 시간 고려. ex)팟캐스트
  • 전파성 : 적합한 상황과 목적에 따라 사용.
  • 취향과 감성 : 소리는 시각정보 이상으로 상상력을 자극. 음향은 언제나 선택 및 조절할 수 있게 구성.
• 음향 인터페이스 AUI
  • 제품에서 음향인터페이스를 디자인할 때 생각해야할 주제들

사용자 행위와 기대에 적절하게 반응하는 자연스럽과 직관적인 피드백을 제공하는가?
소리가 일관성과 규칙성을 가지고 체계적으로 구성되는가?
제품의 전략적인 방향성을 감성적인 면에서도 충분히 표현하는가?
사생활이나 공공장소에서의 불편함을 끼치지 않는가?
음량이 너무 크거나 자극적인 소리로 인해 사용자에게 스트레스를 주는가?

• • 긍정적인 사용자 경험을 추구하는 제품이라면 소리를 통한 전체적인 경험에서 일관성과 방향성을 유지해야함.

터치와 촉감으로 디자인하라

• 개인PC시대에는 키보드와 마우스로 조작하기 때문에 모니터와 직접적인 소통이 없었음
• 모바일 혁명이후 터치인터페이스가 널리 일반화됨.
• 촉감 요소는 현재 진동정도에 그치지만, 그래픽과 모션디자인을 활용해 가상의 촉감을 디자인할 수 있음.
• '타격감' : 액션 게임에서 느끼는 특유의 조작감. 여러가지 요소가 순간적으로 결합하여 하나의 타격감, 즉 촉각을 창출.
• 햅틱 피드백 : 직관적인 형태의 메시지 역할, 촉각은 청각에 비해 사용자에 따른 민감도나 인지능력의 차이가 큼. 시각정보와 함께 사용자 주의집중을 강화하는 수단으로 사용하는 것이 적합.

하드웨어와 소프트웨어의 사용자 경험을 고려하라

• 최근 스마트 기기는 내장된 운영체제와 소프트웨엉, 이들을 탑재하고 물리적인 소통방법을 제공하는 제품 디자인 사이의 유기적인 통합을 강조.
• 유연한 하드웨어 인터페이스
  • 스마트폰이 주목받는 이유는 확장성과 유용성 : 자유롭게 어플리케이션 설치.
  • 최근 기술트렌드는 사용자 선택과 필요성에 따라 확장할 수 있는 유용성에 초점
  • 따라서 하드웨어 또한 유연한 환경에 대응할 수 있어야 함. 화면 기반의 인터페이스의 중요성이 확대됨
• 경계없는 인터페이스 : 하드웨어와 소프트웨어는 사용자 입장에서는 하나의 통합된 제품. 이 두가지가 하나의 목적과 가치를 공유하여 자연스럽게 연결되어야 함.
• 감성적 통합 : 물리적 제품의 외형인 하드웨어는 직관적이며 직접 사용자 감성에 다가감. 반면 소프트웨어는 뇌의 인지작용을 거져 정신적인 교감을 형성.

새로운 경험을 디자인하라

• 웨어러블 제품 : 현실세계에 디지털콘텐츠와 서비스를 더해 새로운 가치를 만드는 증강현실 콘셉 제품. ex) 구글 글래스
• 웨어러블 기기 시장은 아직 초기 단계로, 성공가능성을 높이기 위해서는 사용자 관점에서 이해하는 '통찰력'이 필요.
• 웨어러블 컴퓨터 분야는 다양한 시도가 진행중. 감성에 초점을 맞춘 시도도 꾸준히 진행.
• 휴대에서 착용으로 : 착용형 장치는 사용자와 기기 사이의 관계에서 큰 장점을 가짐. 신체에 밀착되어 사용자 경험을 동시에 공유하고 이를 지능적으로 활용하여 새로운 가치를 만들 수 있음.
• 감성 vs 기능성 : 필요성과 별도로 감성적인 영향을 미침
  • 감성 : 미적인 영역. 웨어러블 영역에 자연스럽게 어울리는 기능과 외형/ 감성적인 소통요소 디자인영역. 1인칭 관점의 공유
• 신체정보의 활용 : 개인의 영역을 확장시킴. 사용자의 기본적인 신체상태와 활동상황을 실시간으로 분석.
• 개인영역의 확장 : 카메라를 통해 시각정보를 저장하고 위치를 추적하여 온라인에 기록. 이를 바탕으로 멀티미디어 콘텐츠도 생산가능.
• 특수목적 : 스포츠나 군사 목적, 의료 활동을 위한 연구, 재해 대책이나 우주 탐사 등을 위한 것.

현규

일러스트레이션 효과적으로 사용하기

사진 종류별 유의사항

• 정확한 항목사진
  • 사람들이 어떤 측면을 보고싶어 하는가.(ex 등산화 밑바닥 보여주기)
  • 말과 앞으로 일어나는 일이 일치되게 하라. 기대감 충족시키기.
  • 사진이나 그림이 도움이 되는 다른 상황도 생각하라.
  • 오프라인 정보와 온라인 정보를 연결하라.
  • 책, 잡지, 또는 다른 인쇄 매체의 사진이라면 꼭 그 인쇄 매체를 웹과 연결시켜야 할지 생각하라
• 콘셉트나 절차를 보여주는 사진
  • 크기 비교(ex 자동차 크기)
  • 규모와 비율 이해하기(ex 편지 사이즈)
  • 절차 보여주기
• 차트, 그래프, 지도
  • 지도와 목록을 결합하라
  • 단순하게 만들라. 보여지는 데이터 양을 사용자가 선택할 수 있게 하라.
  • 차트와 그래프의 제목에 핵심 요지를 담아라.
  • 좋은 데이터 제시 원칙을 웹에도 적용하라.
• 감성적인 사진
  • 사진이 의도했던 감성을 불러일으키는지 확인하라.
  • 전 세계 고객을 감안하라.

효과적으로 일러스트레이션을 이용하기 위한 9가지 지침

1. 무엇인지, 왜 그런지 생각하게 하지마라.
2. 적당한 크기로 제시하라
   • 작은 사진도 선명히 보이게 하라
   • 사진으로 공간을 너무 많이 써서 중요한 정보가 밀려 내려가거나 옆으로 빠지게 하지 마라.
3. 콘텐츠를 감추기보다 돋보이게 하는 일러스트레이션을 이용하라.
4. 사람 사진에는 다양성을 담아라
   • 여러분의 회사가 다양성을 표방한다는 것을 보여라. 하지만 진실돼야 한다.
   • 방문자를 대변하려면 폭넓게 생각하라.
   • 테스트, 테스트, 테스트
5. 콘텐츠가 광고처럼 보이지 않게 하라.
6. 글자나 사진이 깜빡거리거나, 돌아가거나, 흔들리거나, 돌아다니게 하지마라.
   • 텍스트가 돌아가게 하지마라.
   • 사람들이 페이지에 있을 때 페이지를 바꾸지 마라.
   • 동물, 새, 나비 등이 페이지에 돌아다니게 하지 마라
   • 애니메이션 효과에 따른 트레이드 오프를 신중히 고려하라
7. 애니메이션은 도움될 때만 사용하라.
8. 스플래쉬나 플래시로 사람들을 기다리게 하지 마라
   • 스플래쉬 페이지는 사람들의 시간을 잡아먹는다
   • 좋은 말도 과하면 안하느니만 못하다
   • 사람들은 온라인 경험을 직접 제어하고 싶어한다.
   • 일부 사람들에게는 진입부의 비디오가 장애물이다.
   • 일러스트레이션은 접근 가능하게 만들어라

린지

• 살펴볼 사이트:

The Design of Everyday Things Ch. 4 - Knowing What to Do: Constraints, Discoverability, Feedback

• How do we operate something new? --> Knowledge in the world (affordances, signifiers, mappings, constraints) and knowledge in the head (conceptual models, analogies to previous situations)

Four Kinds of Constraints: Physical, Cultural, Semantic, and Logical

Physical constraints

• Limited number of actions
• Desired action made obvious
• Restriction prior to any action being taken (to prevent wrong action before it happens)
  • Battery design; USB design?
• Legacy problem: too many devices use the existing standard
  • Expense of change?
  • Corporate thinking - not caring about the customer

Cultural constraints

• Each culture has a set of allowable actions for social situations
• Ex: Restaurant, public transportation
• Can change over time

Semantic constraints

• The meaning of the situation controls the set of possible actions
• Can change over time

Logical constraints

• After all other options, what is left?
• Obvious errors
• Natural mappings help here

Cultural norms, conventions, and standards

• Greetings with people, traffic laws, food etiquette
• A form of cultural constraint
• Sometimes become international standards or laws
• Violate conventions, and you are marked as an outsider

Applying Affordances, Signifiers, and Constraints to Everyday Objects

The problem with doors

• Sometimes unclear how to use - where to push, push or pull, automatic or not, etc.
• Focus on aesthetics may blind the designer/purchaser to the lack of usability
• Cultural norms play a role

The problem with switches

• Can be annoying... or dangerous
• Must know: 1) what they control, 2) mapping (which they control)
• More switched --> more danger
• Problem comes from coordination of various professions
• Phone/computer applications for this may solve the problem; touch screens, cameras which recognize gestures?

Activity-centered controls

• video, comptuer, full ights, lecture, etc.
• can be done poorly
• device-centered is a wrong approach - different switches/screens for different devices
• regardless, manual controls will still be required because of new, unexpected, demands which require idiosyncratic settings
• manual setting should not cause the current activity to be canceled

Constraints That Force the Desired Behavior

Forcing functions

• a kind of physical constraint: situations in which the actions are constrained so that failture at one stage prevents the next step from happening
• ex: car keys

Interlocks

• Forces operations to take place in proper sequence
• Press down brake pedal to switch out of park
• "Dead man's switch" - user must hold down switch during use so that if they die/are injured the operation stops
  • lawn mower, chainsaw, etc.

Lock-ins

• Keeps an operation active, presenting someone from prematurely stopping it
• Ex: "Want to save file?", jail cells, play pens
• Devices which only are compatible with the company's other devices

Lockouts

• Prevents people from entering a dangerous space or prevents an action
• Barrier between ground floor and basement for fire safety

Conventions, Constraints, and Affordances

• From perception of an affordance to understanding the potential action relies on conventions
• Ex: doorknob

Conventions are cultural constraints

When conventions change: the case of destination-control elevators

People's responses to changes in conventions

• People complain, new learning is required
• The merits don't matter, the change does
• Ex: metric system and the U.S.

The Faucet: A Case History of Design

• How to deal with hot and cold
  • Separate not and cold? Only temperature? Only amount? On-off?
• Which is hot/cold? How to change temp? How to change flow? Which direction controls flow?

Using Sound as Signifiers

• Useful signifier, but can annoy/distract
• Silence can be dangerous
  • Ex: Electric cars, pedestrians cannot hear the car approaching, can be hit
• Skeumorphic - old, familiar ideas into new technologies even if they do not have a functional role