보통 공공기관 SI 프로젝트의 제안요청서(RFP)에는 아래와 같은 요구사항이 표시되어 있는 경우가 많습니다.
사용자 인터페이스 구성
● 정보기술에 대한 미숙련자도 쉽게 사용 가능하고 직관적인 사용자 인터페이스를 제공해야 함
● 공공자원 공유 서비스의 사용자 편의성, 유지보수 효율성 강화 등을 위한 UI/UX표준을 수립하고 전문가에 의한 검증 수행 후, 적용해야 함
● 국민 대상으로 안전하고 편리한 보안 서비스 제공을 위해서는 사용자 경험이 충분히 반영된 UI/UX 설계 필요
● 개발 소프트웨어와 도입 패키지 소프트웨어에 ActiveX 적용을 최소화하며, ActiveX 사용이 불가피할 경우에는 사업자와 협의하여 결정하여야 함
● 입력항목에 대해 필수, 선택 등 항목별 정확한 안내와 함께 입력사항에 대한 체크 및 정확한 경고, 오류 메시지 표시해야 함
● 삭제, 입력정보 완료 혹은 미완료 후 저장 등과 같이 사용자의 수행 활동에 대한 확인 메시지를 제공
● 웹사이트 정보검색 및 조회 시 문자 입력창의 한글 입력 우선 적용
● 메뉴의 구성은 서비스의 연속성 고려하여 구성되어야 함
공공기관 SI만 8년째 하고 있는데 솔직히 UI UX에 대한 개념도 잘 모른 체 설계하는 경우가 태반입니다. 사용자 편의성 같은 건 개나 줘버려 하는 거죠. 왜냐하면 최초 제안서를 작성할 때, WBS를 작성할 때 UI, UX에 대한 공수는 고려하지 않거든요. UI나 UX 전문가가 팀원으로 투입되지도 않고요. ㅎㅎ
그런데 UI UX 관련해서 행안부에서 전자정부 웹사이트 UI UX 가이드라인을 배포했네요. 이런 게 있는 줄 몰랐습니다. 배포 시기가 2019년 3월이네요.
전자정부 웹사이트 UI·UX 가이드라인 배포 및 활용 안내 | 행정안전부> 업무안내> 전자정부국> 정보화 표준·지침 자료실
행정안전부 홈페이지에 오신것을 환영합니다.
www.mois.go.kr
행정안전부에서는 전자정부 서비스의 사용자 편의성을 향상하고 사용자 관점에서 공공 웹사이트를 설계할 수 있도록 "전자정부 웹사이트 UI·UX 가이드라인"을 마련하였습니다.
행정·공공기관에서는 웹사이트를 신규 구축하거나 개선할 경우, 전자정부 웹사이트의 사용성 개선을 위해 본 가이드라인의 사용자 인터페이스·경험(UI·UX)을 준용하여 주시기 바랍니다.
가이드라인 분량이 상당히 많습니다. 내용도 알차네요.
아래와 같이 UI UX 품질 점검할 수 있는 체크리스트도 제공합니다.
실제 개발(설계)할 때 도움이 될만한 내용 요약해봤습니다.
전자정부 웹사이트 UI·UX 설계 원칙
1. 전자정부 웹사이트 설계는 항상 사용자에 대한 연구부터 시작해야 한다.
사용자와 요구사항에 대한 정의가 제대로 설계되지 못해 발생한 오류는 나중에 파악해도 수정하는 데 많은 비용이 들어가기 때문에 사용자 분석이 제대로 수행되었는지 여부가 전자정부 웹사이트 성공의 핵심이 될 수 있다.
2. 전자정부 웹사이트는 모든 사람들의 다양한 상황과 환경, 능력을 고려해야 한다.
장애인, 장노년층, 농어민, 저소득층 등 정보취약계층의 디지털 정보화 수준을 이해해야 한다. 특히 장애인들은 전자정부 웹사이트를 이용하는 데 더 많은 어려움을 겪을 수 있으므로, 한국형 웹 콘텐츠 접근성 지침을 참고하여 전자정부 웹사이트를 제공해야 한다.
3. 더 쉽고 더 편리하게 이용할 수 있는 전자정부 웹사이트를 제공해야 한다.
전자정부 웹사이트를 이용하기 위해 별도의 학습이 필요하거나, 의도하지 않은 반응으로 인해 혼란을 느끼고, 필요 이상의 시간과 노력이 들게 해서는 안 된다. 특히 기능과 업무 절차가 어렵고 복잡할수록, 더 쉽고 직관적으로 사용할 수 있도록 만들어야 한다. 이는 기능적으로 간단하고 빠른 것을 넘어 친숙하고 일관성 있는 언어와 논리적인 절차를 통해 누구라도 어려움 없이 이용할 수 있어야 한다는 것을 의미한다.
사용자는 누구든 실수를 할 수 있지만, 그 가능성을 최소화하는 것이 전자정부 웹사이트의 매우 중요한 역할이다. 사용자가 실수를 하더라도 다시 올바른 선택을 할 수 있도록 적극 적으로 도와야 한다.
4. 누구나 정보를 쉽게 찾고 활용할 수 있도록 전자정부 웹사이트를 제공해야 한다.
공공정보를 찾기 쉽게 만드는 것은 사용자 관점의 편리함을 넘어 국민의 알 권리를 충족시키는 의미를 가지고 있다. 전자정부 웹사이트의 정보를 개방하여 사용자가 아무런 제한 없이 접근할 수 있게 함으로써, 용이한 정보 검색 환경을 제공해야 하며, 궁극적으로 지속 가능한 웹 생태계의 사용성과 투명성을 향상하는 것을 목적으로 해야 한다.
5. 사용자 데이터를 기반으로 전자정부 웹사이트의 품질을 지속적으로 개선해야 한다.
사용자를 참여시키는 테스트는 모든 사용성 설계 방법 중 가장 신속하고 효율적인 방법이다. 이를 통해 사용자가 원하는 것을 재확인하고, 사용자의 행동 양식을 관찰하고, 사용자의 피드백에 귀를 기울여야 한다
반복적인 테스트와 피드백을 반영할 때는 담당자의 직감이나 추측이 아닌, 실증 데이터를 통해 의사결정을 할 수 있는 절차를 마련해야 한다.
제3장 전자정부 웹사이트 UI·UX 설계 기준
1. 사용자에게 필요한 기능과 정보를 제공한다.
□ 사용자가 원하는 정보와 기능을 제공하고 있는가?
□ 사용자가 목적을 달성할 수 있도록 충분한 양의 정보와 기능을 제공하고 있는가?
□ 중요한 정보와 기능을 효과적이며 이해하기 쉽게 표현하고 있는가?
2. 작업에 소요되는 시간과 단계를 최소화한다.
□ 웹사이트는 사용자가 요청한 작업에 대해 적절한 속도로 반응하는가?
□ 사용자가 원하는 정보 및 기능에 빠르게 접근할 수 있는가?
□ 하나의 과업을 완료하기 위해, 동일한 작업을 여러 번 반복하지 않는가?
□ 작업 수행에 불필요한 단계가 포함되어 있지 않은가?
3. 직관적이고 일관성 있게 만든다.
□ 모든 정보와 기능은 논리적 흐름에 적합하도록 구성되어 있는가?
□ 사용자가 이해하기 쉬운 단어와 문장을 사용하고 있는가?
□ 용어, 스타일, 레이아웃, 기능의 작동 방식 등은 전체 페이지에서 일관성 있게 적용되고 있는가?
□ 정보의 표현과 기능의 작동 방식은 일반적인 사용자의 기대에 부합하는가?
□ 사용자의 행동에 도움이 되는 단서 및 정보를 적절한 시기와 위치에 제공하고 있는가?
4. 사용자가 원하는 방식으로 이용할 수 있게 만든다.
□ 사용자의 행동과 웹사이트의 반응 사이에 불필요한 요소가 있는가?
□ 사용자는 원하는 입·출력 도구를 자유롭게 사용할 수 있는가?
□ 사용자가 선호에 따라 웹사이트의 상태 및 설정을 변경할 수 있는가?
□ 사용자에게 다양한 맞춤형 정보를 제공하고 있는가?
5. 사용자가 실수하지 않게 만든다.
□ 사용자의 실수를 유발하는 요소가 있는가?
□ 심각한 결과를 유발하는 기능의 실행 여부를 사용자에게 확인하고 있는가?
□ 사용자가 오류를 빠르게 인지할 수 있도록 표현하고 있는가?
□ 동작을 취소하거나 이전 상태로 돌아갈 수 있는 수단이 제공되고 있는가?
6. 모든 유형의 사용자가 이용할 수 있게 만든다.
□ 장애가 있는 사용자에게 비장애 사용자와 동등한 수준의 정보와 기능을 제공하고 있는가?
□ 다양한 웹 브라우저에서 모든 기능을 동등하게 이용할 수 있는가?
□ 초보 사용자와 숙련된 사용자가 웹사이트에서 제공되는 모든 기능을 편리하게 이용할 수 있는가?
7. 원하는 서비스와 정보를 쉽게 찾을 수 있게 만든다.
□ 사용자가 원하는 페이지나 위치로 이동할 수 있는 여러 가지 수단을 제공하는가?
□ 일반적으로 사용되는 내비게이션 모형을 적절하게 구현하고 있는가?
□ 중요한 정보와 다른 정보 간 위계를 명료하게 구분하고 있는가?
제4장 전자정부 웹사이트 UI·UX 설계 가이드
1. 브랜드 영역
헤더,
핵심적인 정보만 간결하게 제공한다.
전자정부 공식 웹사이트 안내 영역은 항상 페이지 최상단에 배치한다.
로고와 웹사이트 이름은 모든 웹사이트에서 좌측 상단에 배치한다
푸터
개인정보처리 방침을 반드시 표시한다.
전자상거래가 포함된 경우 이용약관을 반드시 표시한다.
웹사이트 내부 링크는 좌측에 외부 링크는 우측에 배치한다.
사용자들이 빈번하게 찾는 링크를 배치한다.
2. 탐색
메인 메뉴
링크는 우선순위에 따라 배치한다.
링크의 활성화 상태가 명확히 구분되도록 표현한다.
링크명에 이해하기 쉬운 용어를 사용한다.
링크의 개수를 최소화한다.
드롭다운 형식의 메인 메뉴를 키보드로 조작할 수 있어야 한다
서브메뉴
메뉴의 길이를 적절하게 제공한다.
메뉴의 계층구조를 명확하게 구분하여 표현한다.
탭
선택된 탭을 강조하여 표현한다.
브래드 크럼,
브래드 크럼은 웹사이트 계층구조 내에서의 상대적인 사용자의 탐색 위치를 보여준다.
각각의 경로를 링크로 제공한다.
일관된 위치에 배치한다.
가장 하위 수준의 경로를 구분하여 표현한다
사이트맵
링크 목록을 사이트 구조에 맞게 계층화하여 표현한다.
외부 사이트나 새 창으로 연결되는 링크를 분명하게 구분하여 표현한다.
3. 검색
통합검색,
통합검색 기능은 검색 상자와 검색 버튼으로 구성한다.
검색의 의미를 보편적으로 인식할 수 있는 레이블과 아이콘을 사용한다.
통합검색은 웹사이트의 모든 페이지에서 접근이 가능해야 한다.
검색창 내에 검색어에 대한 안내를 제공한다.
고급 검색,
조건 검색을 기본 옵션으로 제공하지 않는다.
자동완성 기능을 제공한다.
개인화 검색 기능을 제공한다.
검색 결과
검색 결과 페이지에 검색창을 유지한다.
검색어와 일치하는 항목을 강조 표시한다.
입력한 검색어와 검색 결과 수를 표시한다.
검색 결과가 없는 경우, 결과를 명확하게 알리고 적절한 대안을 제공한다.
4. 콘텐츠
목록보기,
중요한 항목은 목록의 좌측 상단에 배치한다
항목을 의미 있는 단위로 구분하고 논리적인 순서에 따라 정렬한다. (항목의 정렬에 표, 간격, 구분선, 배경색 등을 활용
강조를 위한 시각적 표현을 과도하게 사용하지 않는다
긴 목록은 페이지 등으로 단위를 나누어 제공한다.
필터링 또는 검색 기능을 제공한다.
콘텐츠 작성/업로드,
플레이스 홀더를 이용하여 작성방법을 제공하지 않는다(콘텐츠 작성에 관한 설명은 텍스트 형식으로 입력 필드 상‧하단에 제공)
버튼을 용도 및 기능을 기준으로 구분하여 표현한다
등록 가능한 텍스트 및 파일크기를 표시한다.
입력 세션 유지시간을 표시한다.
상세 내용 보기,
콘텐츠의 작성자, 작성일, 출처, 저작권을 표시한다.
제목은 다른 요소들과 구분되도록 표현한다.
콘텐츠 요소들 사이의 계층구조를 명확하게 구분한다.
문단과 문장은 최대한 간단명료하게 구성한다.
핵심 주제는 첫 문단, 첫 문장에 포함시킨다.
인포그래픽, 사진, 동영상 등의 콘텐츠를 적절하게 활용한다..
댓글 남기기/읽기,
댓글 입력에 사용하는 텍스트 입력 필드는 충분히 크게 제공한다
텍스트 입력 필드는 콘텐츠 주변에 제공한다
댓글을 남기는 목적에 맞게 구조화한다.
작성자/관리자가 남긴 댓글을 다른 댓글과 분명하게 구분한다.
페이징을 사용한다.
관리자가 댓글을 삭제할 경우, 삭제 이유를 명확하게 알려준다.
공유/공감,
공유/공감 아이콘은 관련된 대상 주변에 제공한다
여러 가지 방식의 공유 기능을 제공한다.
공감수 기준의 정렬 기능을 제공한다.
공감을 표시한 사용자의 정보는 제공하지 않는다
관련 콘텐츠
실제로 관련이 있는 콘텐츠를 보여준다.
관련 콘텐츠 목록의 제목은 주제와 관련성에 맞게 제공한다.
상세 내용과 관련 콘텐츠 목록은 연속적으로 제공한다. (상세 내용과 관련 콘텐츠 목록 사이에 공백이 너무 많거나 다른 요소가 개입되면 사용자가 목록을 보지 못하고 놓칠 가능성이 높다.)
목록을 사이드바에 제공하는 경우, 주변의 다른 요소 디자인에 주의한다.
5. 회원
회원가입,
최소한의 정보만 입력하도록 한다.
입력이 필요한 데이터의 용도를 명확하게 설명한다.
아이디, 비밀번호 입력 양식에 관해, 사전에 정확하게 안내한다.
비밀번호 입력 필드에 어떤 문자를 입력했는지를 확인할 수 있게 만든다.
비밀번호의 보안 수준은 사이트 성격에 맞게 설정한다
오류 메시지는 제출 버튼을 누르기 이전에 실시간으로 보여준다
공개 인증(OAuth) 사용을 고려한다.
약관 동의,
제출 버튼의 레이블에 동의한다는 행위를 명시한다
동의하지 않음 옵션을 제공한다.
동의함/동의하지 않음 옵션은 구분하기 쉽게 표현한다.
로그인/인증,
로그인은 반드시 필요한 상황에서 유도한다.
아이디 형식에 대한 단서를 사전에 제공한다.( 아이디를 이메일 형식으로 입력해야 한다는 것을 안내하지 않으면 기억에 의존해야 하므로 많은 시간이 걸린다. )
아이디/비밀번호 찾기 링크를 제공한다.
로그인 정보를 저장할 수 있는 옵션을 제공한다.
로그인 상태로 전환되었음을 명확하게 표현한다.
로그아웃할 수 있는 방법을 분명하게 보여준다.
주소 찾기
주소 찾기 팝업 버튼의 레이블을 명확하게 제공한다.
별도의 팝업을 통해 주소를 입력하는 경우, 주소 입력 필드는 비활성화 상태로 표현한다.
주소체계를 명확하게 표시한다.
6 신청/조회/발행
신청서 작성,
입력 필드 주변에 레이블과 설명을 제공한다.
입력 필드의 크기를 충분하게 제공한다. ( 별도로 키보드를 사용하지 않도록)
필수 입력 요소, 편집 가능한 요소를 분명하게 구분한다
입력값의 단위를 표시한다.
사용자가 잘못 입력/선택한 값을 자동으로 삭제하지 않는다.
초기화 버튼은 다른 버튼과 명확하게 구분한다.
신청 내역 확인 취소
여러 건의 신청 내역이 있을 경우, 내역을 표나 목록으로 구조화하여
알기 쉽게 표현한다.
내역을 신청일자, 중요도, 마감기한 등의 기준으로 정렬하여 중요한
내용을 먼저 확인할 수 있게 만든다.
일괄 선택 기능을 제공한다.
신청 취소 버튼을 명확하게 표현한다
7. 구매/결제
제품 상세정보 보기,
제품의 상세정보를 충분히 제공한다.
고품질의 제품 상세 이미지를 사용한다.
제품의 이용 가능 상태를 사전에 알려준다.
제품 옵션에 대한 도움말을 제공한다.
버튼은 서로 쉽게 구분되도록 표현한다.
장바구니 확인,
제품의 중요 정보를 요약하여 제공한다.
제품 상세 페이지로 이동할 수 있는 링크를 제공한다.
제품 삭제 버튼을 명확하게 표현한다.
제품 상세 옵션을 변경할 수 있는 수단을 제공한다.
전체 제품에 관한 요약된 정보를 제공한다.
다음 단계로 이동하는 버튼을 명확하게 제공한다.
주문/결제정보 입력
관련된 정보를 동일한 섹션으로 구분한다
주문자, 배송, 결제 주소 정보는 동일한 기본값으로 설정한다.
가격, 배송지 정보 및 구매 버튼 영역을 화면 우측이나 하단에 고정한다.
회원가입이나 로그인 없이 구매할 수 있게 만든다.
다양한 결제 수단을 제공한다.
8. 안내
모달,
모달과 주변 영역을 분명하게 구분한다.
스크롤 없이 정보를 확인할 수 있도록 만든다.
단계적인 작업에는 모달을 사용하지 않는다.
하나의 모달이 다른 모달을 실행하지 않도록 한다.
행위 관련 버튼은 최대 2개만 사용한다.
확인,
심각하거나 취소가 어려운 행동에 확인을 요청한다.
상황에 대한 명확하고 간결한 설명을 제공한다.
행동을 확정, 취소할 수 있는 버튼을 모두 제공한다.
버튼의 레이블에 행동을 구체적으로 설명한다.
오류
빠르게 인지할 수 있도록 표현한다.
발생한 오류 및 문제를 분명하게 설명한다.
오류를 수정할 수 있는 방법을 제공한다.
오류 메시지는 사용자에게 부정적인 상황을 알려주는 정보이므로, 정중한 문체를 사용하여 사용자를 안심시켜야 한다
9. 지원/기타
직원검색,
직원 목록에 직원의 이름, 부서, 담당업무, 연락처를 표시한다.
검색 입력 폼과 전체 직원 목록을 함께 제공한다.
담당업무는 쉬운 용어로 간결하게 설명한다
기관 위치 확인
모든 정보를 정확하게 제공한다
기관의 위치를 표시한 약도나 지도를 제공한다.
위치 및 주변 정보가 적절하게 도식화된 약도를 제공한다.
다양한 접근 방법을 알기 쉽게 구조화하여 표현한다.
위치 확인에 참고할 수 있는 유용한 링크를 제공한다.
도움말 찾기
사용자가 겪는 문제점을 제목으로 제공한다.
목록을 유형별로 분류하여 제공한다.
관리자에게 직접 문의할 수 있는 링크를 제공한다.
이것 이외에도 전자정부 웹사이트 자가진단지표라는 부록을 제공하는데 웹사이트를 체크하는데 유용한 거 같네요.
자세한 건 가이드라인을 다운로드하여서 확인해보세요.
