모든 사용자 인터페이스를 구성하는 10가지 GUI 디자인 요소

6 days ago 16

거의 모든 화면은 버튼, 폼, 메뉴, 링크, 대화상자, 알림, 아이콘, 체크박스·라디오 버튼, 탭, 검색이라는 상호작용 알파벳으로 구성되며, 수십 년간 축적된 관례가 사용자의 학습 비용을 줄임 각 요소는 행동 실행, 입력 수집, 이동, 시스템 피드백, 의미 전달이라는 역할이 다르므로 버튼과 링크, 체크박스와 토글처럼 겉모습과 기능의 문법을 뒤섞지 않아야 함 Fitts의 법칙, 인지 우선 원칙, 지각된 어포던스에 따라 목표물을 크고 가깝게 만들고, 선택지를 보이게 하며, 조작 가능한 요소는 그렇게 보여야 함 총 86개 사용성 지침은 불필요한 필드와 알림 삭제, 결과 중심 레이블, 오류 복구 안내, 표준 아이콘 사용, 키보드·터치·색각 접근성 보장 같은 구체적인 설계 판단으로 이어짐 생성형·에이전트 인터페이스에서도 사람은 버튼, 필드, 탭으로 승인·일시정지·검사·실행 취소를 수행하므로, 동적인 화면일수록 익숙하고 일관된 컨트롤이 필요함 GUI를 구성하는 상호작용 알파벳 약 10개의 표준 요소만으로 거의 모든 GUI를 구성할 수 있음 버튼은 명령을 실행함 폼·체크박스·검색은 입력을 받음 메뉴·링크·탭은 사용자를 이동시킴 대화상자·알림은 시스템의 응답을 전달함 아이콘은 다른 요소가 쓰는 상징을 제공함 GUI는 Windows, Icons, Menus, Pointer의 결합인 WIMP를 통해 명령 시퀀스에서 작업 공간으로 발전함 Jakob의 법칙에 따르면 사용자는 대부분의 시간을 다른 사이트와 앱에서 보내므로, 새 제품도 이미 아는 방식으로 작동하기를 기대함 디자인 관례는 여러 제품이 함께 축적하는 공동 자산임 표준 돋보기 아이콘은 집단 학습을 강화함 데스크톱 탐색을 햄버거 메뉴로 감추거나 링크를 버튼처럼 꾸미면 다른 인터페이스가 의존하는 관례까지 약화시킴 1. 버튼: 결과를 실행하는 컨트롤 버튼은 클릭하거나 탭했을 때 하나의 명령을 실행하며, 구매·저장·전송·삭제처럼 화면이 아닌 실제 상태를 바꿈 잘못된 탐색은 뒤로 가기로 복구할 수 있지만 잘못 누른 버튼은 금전, 파일, 메시지에 직접 영향을 주므로 결과 중심 레이블이 중요함 Xerox Star와 Macintosh는 물리적 버튼의 테두리와 음영을 빌려 조작 가능성을 드러냈으며, 이는 지각된 어포던스(perceived affordance)에 해당함 2013년 무렵 확산한 평면 디자인은 테두리와 그림자를 제거해 명령과 장식의 구분을 어렵게 만듦 레이블은 OK 대신 Save...

Read Entire Article