기획서가 없이 기존 서비스를 개선해야한다면 어떻게해야할까요? 이번 시간에도 UI 설계 개선하는 과정을 다뤄보겠습니다. 기존에 진행한 방송통신대학의 일정화면에 이어. 이번에는 시험정보 조회 화면을 고쳐볼겁니다.
* 이번 글에서는 정보정리 단계부터 시작해 UI 프레임워크를 만드는 과정을 포함하고 있어, 정보정리 훈련이 되어있지 않은 분이라면. 따라가는데 어려움을 느끼실 수도 있습니다.
1. 문제 발견하기
대학은 시험에서 일정 점수를 얻어야 졸업이 됩니다. 그렇기에 시험 일정만을 따로 보여주는 화면이 있습니다. 방송통신대학교의 사례도 마찬가지인데요. 문제는 그 내용을 확인하기가 너무 어렵다는 거였습니다. 그래서 크게 세 단락으로 내용을 나눠. 그 내용이 무엇인지를 정리해봤습니다.
정보배치는 논리의 순서. 말하는 순서와도 연관이 있습니다. 그래서 정보의 큰 틀을 텍스트로 바꿔 이야기처럼 말했을 때. 자연스럽게 연결되지 않는 내용이 있다면. 그 정보배치는 무언가 잘못되었다고 생각하시면 됩니다. 위의 화면을 세단계로 나눠서 읽어보면 다음과같은 내용이 됩니다.
- 이 사람은 어떤 사람이고. 이번연도에는 (?)
- 우리학교는 이런 시험분류들을 갖고있고 (?)
- 실제 그 수업은 이 날짜에 이런 시험을 본다
우리학교는 '이런 시험분류들을 갖고있다'는 지점이 너무 뜬금없이 튀어나오지않았나요? 실제로 이 화면이 복잡해진 가장 큰 이유가. 바로 이 시험분류에 대한 자세한 정보들 때문입니다.
2. 정보정리 : 이 사람은 누구인가?
사용자에게 실제로 필요한 정보는 - 이 사람이, 어떤 수업을 듣는데. 이 날짜에. 이런 시험이 있다.는 간단한 정보 뿐입니다.
그러나 실제 화면에서 보여주는 정보는 교직원들이 봐야할 것 처럼. 쓸데없이 자세한 내용들을 다 담고있습니다.
그래서 쓸데없는 정보들이나. 좌측 상단 프로필 영역에서 겹치는 지점들을 싹 다 정리해보았습니다.
결과적으로 상단의 화면은. 연도와 학기 정도의 필터링 정보만 나오면 충분합니다. 추가로 다른 정보가 필터링 기준으로 올라갈 수는 있겠지만. 뭐가 올라갈지는 알 수가 없죠. 그러니 다른 정보들로 넘어갑시다.
3. 정보정리 : 이 학교에는 어떤 시험들이 있는가?
학교의 시험타입별로 어떤 상세정보를 갖는지. 정말 자세한 표가 나와있습니다. 그러나 이 정보는 문맥에도 맞지않고, 표 자체도 너무 복잡해서 정보확인이 어렵습니다.
이 화면에서 중요한건 시험 구분이 아니라. '어떤 시험을, 어떤 날짜에 보게되는가' 가 더 중요합니다. 그러니 이 부분은 과감하게 다른곳에 배치하거나. 다른 UI 컴포넌트로 보여주는게 더 효율적일것 같네요.
한 학생이 듣는 수업은 약 7~8개정도입니다. 여기에 표에 나온 기준으로 보면. 시험종류는 총 일곱가지입니다. 그렇다면 적어도 한 학기당 56개의 일정을 보게되는걸까요? 사실 그렇지않습니다. 이건 시험 종류 표기의 기준점이 명확하지 않기 때문에 생긴 문제입니다.
일단 주어진 내용을 정리해보면 4~5가지 정도의 기준점이 나옵니다.
- 온라인 / 오프라인 여부
- 일정 생성을 누가 한건지 여부
- 중간 / 기말 등의 기준점
- 계절 / 일반학기 구분
여기서 중간 / 기말등의 기준점은 별도 태그로 표현해도 알아보기 어렵습니다. 이 내용은 수업일정 설계개선에서도 다뤘었죠. 중간고사나, 기말고사 구분의 경우. 실제 그냥 일정이름에 텍스트가 들어가는게 더 낫다는 결론을 내렸었습니다.
계절학기나 일반 수업의 경우도 마찬가지로. 사용자가 신청한 수업정보에 들어가는 개념입니다. 사용자가 계절학기를 일반 학기와 같이 듣고있는 경우라 해도. 그걸 뷰 단위에서 표현해줄 필요는 없습니다. 그래서 불필요한 정보가 되었습니다. 이렇게 정리해보면 - 실제로 사용자에게 필요 정보는 두가지입니다.
1. 온 / 오프라인 여부
- 내가 이 시험을 온라인으로 칠수있나?
- 아니면 직접 가서 쳐야하나?
2. 일정 생성을 누가 한건지
- 원래 정해져있던 시험일정인가?
- 아니면 내가 대체신청을 해서 만들어진 시험인가?
- 혹은 교수님이 일정에 없던걸 만든 시험일정인가?
그렇다면 이 내용을 모아서 실제 UI 컴포넌트를 만들어봅시다.
4. 레이아웃 잡기 : 일정 아이템을 배치해보자
처음에는 수업단위로 일정을 볼 수 있지않을까. 생각을 했었습니다. 하지만 실제 케이스를 그려보니. 동일한 날짜에 여러 수업의 시험이 존재할 수 있다는걸 알게되었죠. 그래서 결국 일별로 일정을 묶는 방식이 가장 효과적일거라 판단했습니다.
이후에는 일별을 가로 형태로 묶는게 나은지. 세로 형태로 묶는게 나은지를 실험해봤는데. 기존에 하던대로 날짜가 좌측. 수업 정보가 우측에 나오는 방식이 제일 인식하기 편리했습니다.
실제 컴포넌트처럼. 정보를 뷰단위로 묶어보니. 일별 / 수업 / 이후 시험명칭이나. 온 오프 단위로 배치를 하니. 훨씬 이해가기가 쉬웠죠. 그럼 이제 이 컴포넌트를 반복해서 규모를 확장해보겠습니다.
상단에서는 연도와, 학기, 시험타입 (온 /오프) 등의 내용을 필터링 처리할 수 있게 해뒀습니다. 이후에는 반복되는 날짜별 수업들을 시험단위로 나눠서 볼 수 있게 설계했죠. 이후에는 툴팁이나 팝업, 상세 페이지 형식으로 자세한 정보를 알려주면 되니. 정보를 최대한 줄일 수 있겠죠.
그러나 실제로 정보를 배치해보니, 날짜 외에도 시간정보가 좀 더 강조되어야했습니다. 또한 온라인 / 오프라인을 텍스트로 구분하더라도. 실제 시험을 보는 곳이 어디인지를 표현해줘야했죠. 그 이외에는 큰 문제가 없었습니다.
기간이 정해져있는 과제 타입의 경우도, 약간의 변형을 가하는 것만으로도 처리할 수 있었습니다. 타 과목 수업이나, 계절학기 수업등의 구분은 크게 중요하지 않으므로. 과감히 제거했습니다. 상세 화면에 들어가면 자세한 수업정보가 나올것이기 떄문에. 이 화면에서는 이 시험이 '어떤 수업에, 어떤 타입의 시험인지'에 집중한거죠.
이렇게 기존의 시험 일정화면의 UI 설계 개선이 완료됐습니다. 물론 숨어있는 정보들이 있을수도 있겠지만. 시험 일정을 확인할 수 있는 결과가 나온 것 같네요.
정리하는 글
아무리 복잡한 화면이라도, 내용을 훌어헤쳐서 큰 틀을 보면. 커다란 정보구조를 확인하게됩니다. 사실 이 과정이 가장 복잡하고, 어려운 작업입니다. 이미 정리된 정보를 UI 단위로 연결시키는 과정은 선택의 문제일 뿐이죠. 저는 UI 디자인의 핵심과정이 이런 정보정리 과정에 있다고 생각합니다. 그리고 아무리 많은 기술이 나온다하더라도, '어떤 정보를, 왜, 어떤 목적으로 묶어서 배치할것인가'에 대한 부분은. AI도 쉽게 건드릴 수 없는 지점 중 하나입니다.
이미 익숙해지고, 흔하게 나온 패턴이라면 AI가 학습해 여러 결과를 보여줄 수 있습니다. 하지만 그 정보가 외부에 공개되지않은 서비스거나. 그 갯수가 많지않을 경우. 결국 뛰어난 정보설계자가 그 역할을 해내야합니다. 항상 기억하세요. 어렵고, 복잡한 것이기 때문에 가치를 인정받고. 아무나 할 수 없는 기술이 됩니다. 당장 눈에 보이는 것들을 따라가다보면, 쉽게 베끼거나. 대체할 수 있죠. 그러니 끔찍한 화면들과, 정보의 홍수 속에서. 아름다운 정보 패턴을 파악하고, 정리해나가는 힘을 기르세요. 그게 바로 설계자로서 강한 무기가 되어줄 테니까요.
리플러스의 UD LAB에 대해 더 궁금하시다면, 다음 링크를 확인해보세요!
UD LAB - 이용안내
안녕하세요, 리플러스입니다. UD LAB (구 UI 디자인 연구소)은 UI 디자인과, IT 생태계를 집중적으로 다루고있는 커뮤니티입니다. 크게 단톡방과 디스코드 채널로 이루어져있으며, 주기적으로 디스
udlab.tistory.com
'UI 디자인 연구' 카테고리의 다른 글
| UI 디자인 : 웹페이지와 홀수의 법칙 ? - 컨텐츠 목록 (0) | 2021.02.08 |
|---|---|
| UI 디자인 : 웹페이지와 홀수의 법칙? - 랜딩 페이지 (0) | 2021.02.08 |
| UI 디자인 : 랜딩 페이지 디자인 - 실무 팁 13 (0) | 2021.02.06 |
| UI 설계 개선하기 : 방송통신대학 - 일정화면 (1) | 2021.02.02 |
| UI 패턴 핵심정리 : 지도 서비스 (0) | 2021.01.21 |
댓글