[ UI/EduTech ] Bottom sheet or Centered Modal (Feat. 에듀테크 시 고민해볼 요소들)

사실 요즘 앱 UI를 많이 보고 있다. 
그중 고민 요소는 많은 앱들이 Bottom sheet을 쓰는 것 같다 는 느낌이다.

그래서 한 번 조사해봤다.

 

Bottom sheet or Centered Modal

물론, 누가 더 낫다고 할 수 없다. 왜냐하면 둘에 사용성이 다르기 때문이다.
다만, 학습중이라는 상태라면 콘텐츠를 방해하지 않아야 하기 때문에 Bottom Sheet이 더 선호된다는 사실.

logRocket

A Bottom Sheet is better than a dialog/overlay(usually popup at the center).
What’s special, however, of bottom sheets compared with other overlays is that they preserve substantial visibility of the underlying information. 

 

Bttom Sheet는 정보를 가지리 않는다는 부분에서 다른 알림이랑 차별점이 있다.

사람들이 가장 중요하게 생각하는 부분중 하나이지만
사실과 다른 요소는 (바닥에 위치하니) 터치가 쉽을 것이라는 것이다.

허나, 사람들은 다양한 방식으로 핸드폰을 잡기 때문에 가장 중요하게 작용하는 요소는 아니다.

 

Simplicity and minimalism

If you don’t know how to make an eLearning app,
start with minimalism or the ‘less is more’ approach.

Offering learners the most useful information without
long texts, distracting images, and annoying ads is crucial,
especially if you are dealing with smaller smartphone screens.

Make simple and minimalistic interfaces your priority. 
Use basic textures and plain colors so as not to distract learners from important study elements.

 

대체적으로 인지부조화에 관련하기 때문에 Minimalism과 less is more라는 철학을 갖고 UI를 그리는 것 같다.

그래서 좀 논문을 찾아봤다.

 

 

---

 

 

 

Usability of Learning Moment: Features of an E- learning Tool That Maximize Adoption by Students

https://escholarship.org/uc/item/6q43908v

Usability of Learning Moment: Features of an E-learning Tool That Maximize Adoption by Students

내용 : 
연구진들은 응급의학과에서 실습하는 의과대학생들이 임상 경험을 더 효과적으로 학습할 수 있도록 돕는 웹 기반 플랫폼을 개발.

 

1. 미니멀리스트 스타일

한 학생이 "미니멀한 스타일을 사용한 것이 마음에 든다. 즐겁고 유용하며 쉽게 만들어준다"라고 표현.
하지만 구체적으로 어떤 시각적 요소들이 이 미니멀함을 구성하는지에 대한 세부사항은 제공되지 않음.

2. 글자 수 제한 기능

한 학생은 "글자 수 제한이 있다는 것을 알았고, 이것이 '짧고 간결하게 유지하라'고 상기시켜준다"고 언급.
이는 학습 내용을 간결하게 작성하도록 유도하는 인터페이스 설계했음을 추론 가능.

3. 정보의 계층적 구조

같은 학생이 "정보를 짧고 간결한 방식으로 제시하고, 
더 많은 사고와 배경을 위한 영역을 따로 두는 좋은 방법"이라고 설명.
이는 핵심 학습 포인트와 상세 정보를 분리하여 표시하는 구조였음을 의미.

 

 

 

Design of a micro-learning framework and mobile application using design-based research

https://pmc.ncbi.nlm.nih.gov/articles/PMC10280576/

Design of a micro-learning framework and mobile application using design-based research - PMC

 

내용: 
마이크로 러닝은 사람들이 짧은 시간 동안 작은 정보 단위로 학습하는 기법. 
지식을 관리 가능한 단위로 나누면 학생들이 접근해야 하는 정보의 양을 줄이고, 
학습 과정과 학습 환경을 재정의하며, 학생들이 자신의 학습을 개인화하도록 장려.

마이크로 러닝의 핵심:
마이크로 러닝의 핵심 콘텐츠는 경구(aphorisms)를 활용한 짧은 텍스트 형태로 구성

 

3단계 계층적 레벨 시스템

단계별 접근법은 학습자의 진행 상황에 따라 점진적으로 난이도를 조정하는 적응형 학습 환경을 구현.
 사용자는 초급 레벨에서 5개의 무작위 경구로 시작하며, 올바른 해석으로 레벨을 완료하면 
다음 레벨로 진행할 수 있고, 애플리케이션은 난이도를 자동으로 증가.

 

추가적인 활용 기법

키워드 하이라이팅 기법:
학습자가 전체 텍스트를 읽으면서도 중요한 정보에 집중할 수 있도록 돕는 인지적 지원 메커니즘

시각적 보조 요소 통합 방안:
학생들은 각 경구에 그림을 추가하면 연습을 빠르게 맥락화하는 데 도움이 될 것이라고 제안.
이는 멀티미디어 학습 이론에 기반한 인지적 부담 감소 전략으로 사용될 수도 있었을 것으로 예상.

 

측정 가능한 학습 성과

애플리케이션을 4주간 사용한 학생들의 전반적 성과가 17.31% 향상되었으며,
애플리케이션이 데모 버전으로 구현된 후 사후 테스트에서 추론 레벨의 개선(8.24%)이 관찰.

 

 

Effect of improving the usability of an e-learning resource: a randomized trial

https://pmc.ncbi.nlm.nih.gov/articles/PMC4056166/

Effect of improving the usability of an e-learning resource: a randomized trial - PMC

 

내용:

연구진은 의학 전공의들을 위한 전해질 및 산-염기 장애 교육용
멀티미디어 e-러닝 애플리케이션인 "Electrolyte Workshop"을 개발 후 애플리케이션 사용성 개선 개선 비교

 

비교

버전 1 (V1): 최초 완성된 버전
버전 2 (V2): 사용성 평가를 통해 발견된 모든 문제점을 수정한 개선 버전

 

인터페이스 설계 문제

버전 1 (V1)	버전 2 (V2)
글꼴 크기가 너무 작아 가독성이 떨어짐	글꼴 크기 확대 및 가독성 향상
실험실 데이터가 숨겨져 있어 발견하기까지 5분이 소요됨	중요한 정보(실험실 데이터 등)의 가시성 개선
치료 옵션 사용법에 대한 설명이 부족함	직관적인 네비게이션 구조로 재설계

* 어떤 식으로 변경했다는 구체적인 명시는 없음

 

상호작용 문제

버전 1 (V1)	버전 2 (V2)
슬라이더 조작이 어려움  (드래그해야 하며 특정 지점 클릭이 작동하지 않음)	슬라이더 및 기타 인터페이스 요소의 조작성 향상
네비게이션이 복잡하고 직관적이지 않음	치료 옵션 사용법에 대한 명확한 가이드 제공
용어 설명 부족 (예: SBP가 수축기 혈압을 의미한다는 것을 이해하는 데 시간 소요)	의학 용어에 대한 설명 추가

 

 

 

번외)

이미 전문 지식을 갖춘 사용자들은 학습 개선이 이뤄지지 않을 수 있다.

어느 정도 적정 수준의 인지 부화는 학습에 도움이 된다.

 

 

참조:
https://link.springer.com/article/10.1007/s10648-021-09624-7

https://blog.logrocket.com/ux-design/bottom-sheets-optimized-ux/
https://www.nngroup.com/articles/bottom-sheet/