플로우 차트 작성 규칙

플로우 차트 란..

순서도는 어떠한 일을 처리하는 과정을

순서대로 간단한 기호와 도형으로 도식화한 것을 의미한다.

플로우차트 종류

 

플로우 차트로 많이 사용하는 5가지 도형

플로우차트 작성 규칙 5개

 

1. 제이콥의 법칙(Jakob's law)

• 제이콥 닐슨(Jacob Nielsen)
• End of Web Design
• 사용자는 여러 사이트에서 대부분의 시간을 보낸다.
• 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
• 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다.
• 기존의 멘탈 모델(Mental Model)을 활용하면 사용자가 새 모델을 익히지 않아도 바로 작업에 돌입할 수 있는 뛰어난 사용자 경험이 완성된다.
• 변화를 꾀할 때는, 사용자에게 익숙한 모델을 한시적으로 이용할 권리를 부여해서 불협화음을 최소화하라.

 

- 멘탈 모델(Mental Model)

• 시스템의 작동 방식에 관해 알고 있다고 생각하는 바
• 시스템 작동 방식에 관한 모델을 만들고, 그 시스템과 비슷한 낯선 상황에 해당 모델을 적용
• 과거의 경험으로 쌓은 지식을 새로운 대상과 인터렉션 할 때
• 사용자 인터뷰, 페르소나, 여정 지도, 공감 지도 등.
• 멘탈 모델 부조화(Mental Model Discordance)

- 사용자 페르소나(User Persona) - 사용자 가면

• 정보: 사진, 이름, 나이, 직업 등
• 세부사항:  이력, 목표, 행동, 동기, 불만사항 등
• 통찰: 사고방식

 

2. 피츠의 법칙(Fitts's low)

• 폴 피츠(Paul M. Fitts)
• 움직임의 진폭을 제어하는 인간 운동 시스템의 정보 용량
• THE INFORMATION CAPACITY OF THE HUMAN MOTOR SYSTEM IN CONTROLLING THE AMPLITUDE OF MOVEMENT
• 대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다.
• 터치 대상의 크기는 사용자가 쉽게 알아보고 정확하게 선택할 수 있을 정도로 충분히 커야 한다.
• 터치 대상 사이에 충분한 거리를 확보해야 한다.
• 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.
• 사용성(Usability)과 인터랙션(Interaction)

 

 

 

 

피츠의 법칙(Fitts's low)

- 터치 대상

• Mit 터치 랩(MIT Touch Lab)
• 구글 머티리얼 디자인 가이드
• 터치 대상 간의 거리를 최소 8dp 이상 확보해서 정보 밀도(Information Density)와 사용성을 적정 수준으로 유지하라
• dp(Density-independent Pixels, 밀도 독립 화소)
• 손가락, 터치, 인간을 위한 디자인 1부
• Design for Finger, Touch, and People, Part1

 

3. 힉의 법칙(Hick's law)

• 윌리엄 에드먼드 힉(William Edmund Hick)
• 레이 하이먼(Ray Hyman)
• 1952년 자극의 개수와 자극에 대한 반응 사이의 상관관계에 관해 진행한 실험
• 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.

힉의 법칙(Hick's law)

 

• 의사결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화하라.
• 인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라.
• 추천 선택지를 강조해서 사용자의 부담을 줄여라.
• 신규 사용자의 인지 부하를 줄이려면 온보딩(onboarding)을 점진적으로 진행하라. 
• 추상적으로 느껴질 정도로 단순화하지 않도록 주의하라.

 

- 인지 부하(Congnitive load)

• 정신적 자원(Mental Resource)의 소모
• 너무 많은 정보를 짧은 시간에 접하게 되면 과부하가 걸리게 되고, 모자란 용량을 마련하기 위해 기억하고 있던 내용의 일부를 버리게 됨.

 

- 카드 분류(Card Sorting)

카드 분류(Card Sorting)

 

• 정보 아키텍처에 관하여 사용자 어떤 기대를 하는지 알아내는 유용한 방법
• 카드 분류: 단순한 용어 맞추기 이상의 결과를 내는 방법
• Card Sorting: Pushing Users Beyond Terminology Matches

 

4. 밀러의 법칙(Miller's law) 

• 조지 밀러(George Miller)
• 마법의 숫자 7, 더하거나 빼기 2: 정보 처리 용량에 관한 몇 가지 한계
• The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processiong Information
• 보통 사람은 작업 기억에 7개의 항목밖에 저장하지 못한다.
• '마법의 숫자 7'을 내세워서 불필요한 디자인 제약을 정당화하지 마라.
• 사용자가 쉽게 처리하고 이해하고 기억할 수 있게 콘텐츠 덩어리를 작게 나눠 정리하자.
• 단기 기억 용량은 사람에 따라, 그리고 기존 지식과 상황적 맥락에 따라 달라진다는 것을 기억하자.

- 덩어리화(Chunking)

• 인간은 덩어리화를 활용해 정보를 암기
• 덩어리의 크기는 중요하지 않음
• 인간의 단기 기억은 한계가 있고 정보를 덩어리로 만들면 정보를 더욱 효과적으로 암기

 

- Wall of Text 

• 문장의 벽 - "의사소통이 잘 되지 않는다"는 의미로 많이 사용하는 단어

Wall of Text

 

5. 포스텔의 법칙(Postel's law)

• 존 포스텔(Jon Postel)
• RFC 793: Transmission Control Protocol
• 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
• 사용자가 어떤 동작이나 입력을 하든지 공감하는 태도로 유연하고 관대하게 대처하라
• 인터페이스의 안정성과 접근성을 보장하되, 입력, 접근성, 성능면에서 만반의 준비를 하자.
• 다양한 가능성에 대해 잘 예측하고 대비할수록 디자인 회복 탄력성은 좋아진다.
• 사용자의 가변적인 입력을 수용해서 기계가 이해할 수 있는 방식으로 해석하라.
• 입력의 한계를 정의하고 사용자에 명확한 피드백을 제공하라.

 - 견고함의 원칙(Robustness Principle)

• 인터페이스의 안정성과 접근성을 보장하는 동시에 입력, 접근성, 성능면에서 만반의 준비를 해야한다.
• 인간 - 컴퓨터 인터랙션(HCI) 철학

- 의사결정 피로감(Decision Fatigue)

• 사용자가 채워야 할 필드가 늘어날수록, 디자이너가 사용자에게 부과하는 인지적 에너지와 노력도 커진다.
• ex) 아이디, 비밀번호 입력도 없애자 -> 지문, 페이스ID

 - 반응형 웹디자인(Responsive Web Design)

• 광범위한 유형의 입력을 수용하되, 기기의 크기나 유형에 구애받지 않고 다양한 크기의 화면에서 안정적으로 출력이 이뤄지게 한다는 철학

- 점진적 향상(Progressive Enhancement)

• 미래를 위한 포괄적인 웹 디자인
• Inclusive Web Design For the Future
• 모든 사용자가 브라우저 기능 지우너, 기기 기능이나 성능, 인터넷 연결 속도에 상관없이 기본적인 콘텐츠와 기능에 접근할 수 있어야 한다.

- 우아한 성능 저하(Graceful Defradation)

• 장애 허용을 강조하고 더 좋은 소프트웨어와 하드웨어에 초점을 맞추며, 나머지 사용자에게는 차선의 서비스를 제공.

 

6. 피크엔드 법칙(Peek-end rule)

• 대니얼 카너먼(Daniel Jahneman)
• 더 큰 고통을 적은 고통보다 선호하게 하려면 경험의 마지막 순간이 좋아야 한다.
• When More Pain IS Preferred to Less : Adding a Better End
• 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낌 감정을 바탕을 경험을 판단하는 경향이 있다.
• 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 쓰자.
• 제품이 사용자에 가장 큰 도움을 주는 순간, 혹은 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간 등을 알아내라.
• 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다는 사실을 명심하자.

- 인지 평향(Cognitive Bias)

• 판단에 관여하는 사고나 이성에 발생하는 계통 오차(Systematic Error)
• 상황을 철저하게 분석하기보다 효율적으로 신속한 결정을 내리게 해주는 일종의 정신적 지름길
• 확증 편향(Comfirmation Bias)
• 인간은 기존 신념을 지키기 위해 이를 지지하는 정보에만 주의를 기울이고 이에 반하는 정보를 무가치하다고 치부하는 경향
  
  

- 기억 편향(Memory Bias), 최신 효과(Recency Effect)

 

• 우버가 행동과학을 적절하게 활용하는 방법
• How Uber Leverages Applied Behavioral Science at Scale
• 유후시간에 대한 거부감: 배정된 차량이 도착할 때까지 차량의 이동 경로를 보여주는 재미있는 애니메이션
• 작동상의 투명성: 도착 예정 시간뿐 아니라, 도착 예상 시간이 계산되는 방법에 대한 정도 확인 가능
• 점진적 목표 당성 효과: 프로세스의 각 단계도 명확히 설명
• 여정 지도(Journey Mapping)
• 사용자가 임무나 목표를 성취하는 과정을 서술함으로써 사용자가 제품 혹은 서비스를 사용하는 방법을 시각화할 때 매우 유용하게 쓰이는 정성적 조사 방법

Online Shopping Customer Journey Map

 

• 렌즈(Lens): 해당 경험을 통해 보여주고자 하는 인물의 시각을 규정하는 섹션. 대게 최종 사용자의 페르소나 포함. 여정 지도를 통해 보여줄 시나리오 설명.
• 경험(Experience): 타임 라인을 따라가면서 최종 사용자의 행동, 사고방식, 감정을 조명하는 섹션. 사용자가 각 단계에서 어떤 생각을 하는지 심도 있게 보여줌. 연구나 사용자 인터뷰를 통해 드러나는 전반적인 견해, 고충점(Pain Point), 질문, 동기 등을 얻을 수 있음.
• 통찰(Insights): 경험에서 드러난 주요 교훈을 확인. 개선할 여지가 있는 기회 영역을 목록으로 정리.

- 부정적인 절정

• 404 에러 페이지(404 Error Page)

404 Error Page

 

7. 심미적 사용성 효과(Aesthetic-Usabuillity Effect)

• 쿠로스 마사아키, 카시무라 카오리
• 외적인 사용성 대 내재된 사용성: 외형적 사용성 결정 요인에 대한 실험적 분석
• Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability
• 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.

 

• 보기 좋은 디자인은 뇌에 긍정적 반응을 일으켜서 사용자로 하여금 제품이나 서비스의 사용성이 뛰어나다는 생각이 들게 한다.
• 제품이나 서비스의 디자인이 보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해진다.
• 시각적으로 만족스러운 디자인은 사용성 문제를 가리고 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다.
• 긍정적 영향에 관한 신경심리학 이론과 인지에 미치는 영향

- 자동 인지 처리(Automatic Cognitive Processing)

• 생각에 관한 생각(2015, 2018) 책
• 시스템 1: 직감, 느낌, 의도. 인상 등
• 시스템 2: 집중, 연구, 기억 검색, 수학 연산, 상황 인식 등
• 디자인 심미성이 사용성 테스트에 미치는 영향: 사용자 성능과 체감 사용성에 미치는 효과

 

8. 폰 레스토프 효과(von Restorff effect)

• 헤드윅 폰 레스토프(Hedwig von Restorff)
• 트레이스 필드에서 필드 형성의 효과
• Ueber die Wirkung von Bereichsbildungen im Spurenfeld. Analyse von Vorgängen im Spurenfeld.
• 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지지만 기억할 가능성이 크다.
• 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 하라.
• 시각적 요소를 강조할 때는 제한을 두어서, 각 요소 간 경쟁을 피하고 가장 중요한 항목이 광고로 오인되지 않게 하라.
• 특정 요소를 강조할 때 색상에만 의존하면 색맹이나 저시력인 사용자가 배제된다는 사실을 유념하라.
• 움직임을 활용해서 대비를 전달할 때는 움직임에 민감한 사용자를 주의 깊게 고려하라.
• 우수한 패턴 처리가 진화된 인간 두뇌의 본질이다.
• Superior Pattern Processing Is the Essence of the Evolved Human Brain
• 인간은 순식간에 사물을 구별할 뿐 아니라, 다른 생명체에 비해 뛰어난 패턴 처리 능력, 사물 간 작은 차이까지 알아채는 능력을 타고났다.
• 디지털 인터페이스를 접할 때 사용자는 시각적으로 대비되는 요소에 빠르게 주의를 빼앗긴다.

- 선택적 주의력(Selective Attention)

- 배너 무시(Banner Blindness)

- 변화 무시(Change Blineness)

• 특이성, 주의력, 속성: 머리 꼭대기 현상
• 작업 기억과 주의력-개념적 분석과 검토
• 배너 무시 속편: 사용자는 모바일과 PC에서 광고를 기피한다.
• 남용하지 말고, 명확한 목적이 있을 때만 사용해야 한다.
• 디자이너는 자신이 강조하려고 활용하는 시각적 속성이 다양한 사용자에게 어떤 영향을 미치는지 반드시 파악해야 한다.
• 디자인에서 대비를 강조하기 위해 움직임을 활용하기도 하는데, 이럴 때는 전정신경 장애가 있거나, 균형과 안구운동 제어와 관련된 감각 정보를 처리하는 내이와 뇌에 연결된 시스템에 질병이나 상해를 겪는 이들을 고려하는 것이 중요하다.

 

9. 테슬러의 법칙(Tesler's law)

• 래리 테슬러(Larry Tesler)
• 인터랙션 디자인 언어
• 데스크톱 퍼블리싱 개발의 핵심인 인터랙션 시스템의 구조와 기능을 정의하는 원칙, 표준, 모범 사례 모음집
• 복잡성 보전의 법칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복 작성이 존재한다.
• 제품과 서비스 사용자가 겪을 불필요한 복잡성을 제거해 명쾌하고 단순한 경험을 구현하는 것은 디자이너가 추구해야 할 중요한 목표
• 좋은 사용자 경험이란 목표 달성을 방해하는 장애물을 제거한 쉽고 직관적인 경험.
• 단순성을 추구할 때는 균형을 잘 잡고 선을 넘지 않는 게 중요.
• 예) 

아이콘

10. 도허티 임계(Doherty threshold)

• 월터 J. 도허티(Walter J. Doherty)
• 빠른 반응 시간의 경제적 가치
• The Economic Value of Rapid Response Time
• 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성이 급격히 높아진다.
• PC 초창기 임계값 2초
• 1982년 반응 시간이 0.4초 이하일 때 "생산성은 반응 시간 감소의 정비례 이상으로 증가한다."
• 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도로 인터랙션 할 때 생산성은 급격히 높아지고, 컴퓨터로 하는 작업에 드는 비용도 크게 줄고, 직원들의 업문 만족도가 향상되며, 작업 결과의 품질도 개선된다.
• 반응이 즉각적이라고 느끼려면 0.1초 이내여야 한다.
• 0.1~0.3초 사이의 지연은 맨눈으로 감지되는 수준이어서 사용자는 해당 시스템이 자신의 통제를 벗어나고 있다고 느낀다.
• 지연이 1초 이상으로 늘어나면 사용자는 집중하기가 어려워지고 작업 수행에 필요한 정보를 놓치기 시작하므로 생산성은 필연적으로 감소.
• 사용자의 주의가 분산되는 것을 막는 동시에 생산성도 향상하려면 시스템 피드백을 0.4초 이내에 제공하라.
• 반응 시간을 개선하고 체감 대기 시간을 줄이려면 체감 성능을 활용하라.
• 애니메이션은 로딩이나 프로세싱 진행되는 동안 사람들의 시선을 끄는 한 가지 방법이다.
• 설사 정확하지 않다고 해도 진행 표시줄을 보여주면 사용자는 대기 시간에 좀 더 관대해진다.
• 실제 작업이 훨씬 빨리 완료되어도, 의도적으로 작업 완료를 늦게 알리면 체감 가치를 높이고 신뢰를 형성하는데 도움이 되기도 한다.
• 웹 사이트의 용량이 커지면서 반응 시간도 느려지고 있다.
• HTTP Archive

State of the Web

• 뼈대 화면(Skeleton Screen)
• 뼈대 로딩(Skeleton Loading)

Skeleton Screen

 

• 블러 업(Blur Up)

출처 - CSS-TRICKS

 - 진행상태 표시자(Progress Indicator)

 - 진행표시줄(Progress Bar)

• 요청한 작업이 처리되고있다는 사실을 분명히 알 수 있다.
• 사용자가 기다리는 동안 볼거리를 제공한다.
• 실제 대기 프로세스가 아닌 진행표시줄 애니메이션에 관심이 집중되어 기다린다는 느낌을 줄여준다.

 - 낙관적 UI(Optimistic UI)

• 컴퓨터-인간 인터페이스 진행 상태 표시자의 중요성
• 사람-컴퓨터 대화형 트랜잭션의 반응 시간
• 앱을 망가 뜨리는 UX 비밀
• The UX Secret Taht will Tuil Apps for You

- 반응이 너무 빠를때

• 변화가 너무 빨리 일어나면 아예 눈치조차 채지 못할 수 있다.
• 정신적으로 처리할 시간이 충분히 확보되지 않기 때문에 무슨일이 일어난 건지 사용자가 이해하기 어려울 수도 있다.
• 오히려 신뢰도가 떨어질 수도 있다.