우수한 온라인 코스를 만들기 위한 첫 걸음은 사용자가 가장 이해하기 쉬운 방법으로 콘텐츠를 표시하는 것입니다.
효과적인 콘텐츠 디자인을 통해 콘텐츠를 더욱 돋보이게 하고 매력적으로 만들 수 있습니다. 디자인이 잘 된 콘텐츠는 다음 요구 사항을 충족하는 콘텐츠가 될 수 있습니다.
- 학습 용이성: 학생이 자료를 학습하는 동안 코스를 얼마나 빨리 탐색할 수 있습니까?
- 사용 효율성: 학생이 코스 설정에 익숙해진 후 작업을 얼마나 빠르게 완료할 수 있습니까?
- 주관적인 만족: 학생이 코스 자료를 얼마나 즐겁게 공부합니까?
- 사용 편의성: 능력, 경험, 지식, 언어 기술, 하드웨어 또는 집중력 수준이 천차만별인 사용자들이 코스를 쉽게 이용할 수 있습니까?
- 접근성: 장애가 있는 사람도 일반인과 동일한 수준의 정보 및 서비스를 얻고 불편 없이 사용할 수 있는 수단을 제공합니다. 귀하의 코스에도 이러한 기능이 있습니까?
또한 효과적인 디자인이란 단순하고 간단한 디자인일 수 있습니다. 깔끔하고 간단한 디자인은 미관상으로 보기 좋을 뿐 아니라 강한 인상을 줍니다.
코스를 잘 디자인하려면 계획이 필요합니다. 시각적 디자인뿐 아니라 글 쓰기 스타일, 어조, 정보 배치, 접근성 등을 모두 고려해야 합니다.
접근성에 중점 두기
온라인 코스의 콘텐츠를 준비할 때 학생마다 요구 사항이 다양하다는 점을 기억하십시오. 클래스의 구성원 대부분은 신체적인 장애가 없을 수 있습니다. 그러나 한 명의 학생이 시각 장애, 청각 장애를 지니고 있거나 집중하는 데 어려움을 겪고 있을 수 있습니다.
World Wide Web의 창안자인 Tim Berners-Lee는 "웹의 힘은 보편성에 있습니다. 장애 여부와 관계없이 모든 사람이 접근할 수 있다는 점이 웹에서 핵심적인 측면입니다."라고 말했습니다. 온라인 코스도 이와 같아야 합니다.
Blackboard는 환경 자체를 모든 사람이 접근할 수 있도록 보장하면서 접근 가능한 애플리케이션을 만들기 위해 노력하고 있습니다.
몇 가지 간단한 가이드라인을 준수하고 동일한 수준의 지시 사항을 모든 사람에게 제공할 수 있습니다.
- 정보 디자인이 확실하고 논리적이어야 합니다.
- 레이아웃은 깔끔하고 간단하게 유지하십시오. 가능한 한 많은 페이지에 동일한 레이아웃을 사용하면 예측 가능성 구축에 도움이 됩니다.
- CSS 스타일 시트 기술을 사용하십시오. 스타일 시트는 페이지 구조에서 콘텐츠를 분리하여 화면 리더 또는 특수 브라우저 소프트웨어를 사용하는 사람이 웹 페이지에 더 접근하기 쉽도록 만듭니다. 스타일 시트는 페이지 외관을 제어하는 데 유용합니다.
- 텍스트, 배경 및 그래픽에 대해 고대비 색상 조합을 선택하십시오. 배경을 단순하게 유지하십시오. 검은 색상의 텍스트 콘텐츠에는 흰색이 가장 눈에 띕니다.
- 화면 리더를 사용하거나 이미지를 해제하고 웹 페이지를 방문하는 사용자를 위해 이미지를 설명하는 대체 텍스트를 추가하십시오. 모든 이미지의 대체 텍스트를 추가하십시오. 다음은 2가지 예외 사항입니다.
- 이미지 주변의 텍스트는 이미지의 의미를 전달합니다.
- 이미지는 글머리 기호와 같이 이해를 위해 필요하지 않습니다.
- 주변 콘텐츠가 없이 명백한 링크를 생성하십시오. 모호한 텍스트가 있는 링크(예: "여기를 클릭하십시오.")는 사용하지 마십시오.
- W3C 사양으로 작성된 HTML을 사용하십시오. W3C 표준을 기준으로 페이지를 확인하십시오. 장애가 있는 사용자에게 코스를 시험하고 피드백을 제공하도록 요청하는 것이 이상적입니다. 이 온라인 접근성 도구 또는 다른 도구를 사용할 수 있습니다.
- A-Checker 접근성 검사기의 개발자가 제공하는 UI 옵션 도구는 별도의 소프트웨어나 도구 없이도 웹 사이트의 여러 측면을 사용자 정의하고 컨트롤할 수 있게 해주므로 웹 사이트의 사용 편의성, 유연성 및 접근성을 향상하거나 개선할 수 있습니다.
- WAVE 접근성 도구는 무료의 웹 기반 도구로, 웹 콘텐츠의 접근성을 신속하고 효과적으로 평가하게 해줍니다.
웹 용으로 쓰기
온라인 코스용 콘텐츠를 준비할 때 Blackboard Learn에 통합하고 싶은 기존 자료를 발견할 수 있습니다. 학생의 학습 효과를 최대화하기 위해 이러한 기존 자료를 웹에 게시할 수 있도록 약간의 수정이 필요할 수 있습니다.
온라인에서 글을 읽는 것과 인쇄물을 읽는 것은 매우 큰 차이가 있습니다. 1997년에 Jakob Nielson이 실시한 설문 조사에 따르면, 테스트 사용자의 약 80%가 웹 페이지를 검색했다고 합니다. 콘텐츠를 처음부터 끝까지 충실하게 읽은 비율은 고작 16%에 불과했습니다.
또한 연구에 참여한 대부분의 사용자가 거의 "F" 형식에 따라 콘텐츠를 읽었습니다. 가장 먼저 페이지 맨 윗부분을 읽습니다. 그 다음으로, 몇 줄을 건너뛰고 가로 방향으로 읽은 후 페이지 왼쪽 부분을 아래쪽으로 대강 훑어봅니다.
테스트 사용자가 온라인 콘텐츠를 읽는 습관에서 무엇을 배울 수 있습니까? 우선 가장 중요한 정보를 처음 두 단락에 입력하십시오. 학생이 콘텐츠를 끝까지 읽지 않더라도 최소한 교수자가 전달하려는 주요 개념 정도는 충분히 보여 줄 수 있습니다. 인식 장애가 있는 학생은 페이지를 읽는 도중에 읽기를 중단할 수 있으므로 정보를 이러한 구조로 전달하면 도움이 됩니다.
이 표에는 Jakob Nielson의 웹사이트에서 가져온 추가 가이드라인이 나열되어 있습니다.
| 가이드라인 | 설명 |
|---|---|
| 지원 페이지 검색 |
|
| 체계적인 단락 작성 |
|
| 단어 수 축소 |
|
| 키워드 강조 표시 |
|
| 대화체 사용 |
|
효과적인 레이아웃
텍스트 서식은 그 자체가 가독성에 중요하지만, 페이지 디자인 및 레이아웃 또한 콘텐츠 효과에 영향을 줍니다.
페이지를 디자인할 때 다음 원칙을 사용하십시오.
- 깔끔하고 간단한 페이지를 사용합니다. 독자가 당황하지 않도록 단락, 이미지 및 기타 페이지 요소 사이에 공백을 충분히 사용합니다.
- 블럭 스타일 단락을 사용합니다. 각 단락 사이에 공백을 남겨 두고, 첫 번째 줄을 들여쓰지 마십시오.
- 일관성을 유지합니다. 페이지마다 디자인 요소가 반복되는 레이아웃을 사용하여 예측 가능성을 높입니다. 학생이 편안함을 느끼고 정보를 빨리 찾을 수 있도록 각 페이지에 동일한 글꼴, 색상 및 머리글 스타일을 사용합니다.
- 머리글을 사용합니다. 정보를 덩어리로 묶어서 제공하고 페이지를 읽기 쉽게 구성합니다.
- 일관적인 색상 조합을 사용합니다. 색상은 5개까지만 사용하십시오. 하나 이상의 강조 색상이 있고 동일한 색조의 다양한 음영을 사용하면 효과적인 조합이 됩니다. 가독성을 극대화하는 색상을 선택합니다. 불확실한 내용은 흰색 바탕에 검은색 글자를 사용합니다.
그래픽을 통한 기능 강화
그래픽을 사용하여 다른 콘텐츠를 강화하거나 독립 실행형 교육 요소로 활용할 수 있습니다. 차트, 사진, 다이어그램, 예시에 그래픽을 표시하여 중요한 정보를 제공할 수 있습니다. 이미자를 사용한 배너를 통해 탐색을 도와주거나 아이콘으로 학생을 코스로 안내하는 시각적 단서를 제공할 수 있습니다.
디자인이 잘 된 그래픽은 학생을 다음 방법으로 지원할 수 있습니다.
- 시각적 단서를 통해 다양한 유형의 정보를 탐색하고 찾습니다.
- 이해하기 어려운 정보를 해석합니다.
- 텍스트로 설명된 자료에 관해 시각적으로 심적 모델을 구성합니다.
- 아이디어 또는 개념 간의 관계를 보다 잘 이해합니다.
- 그래픽은 목표에 맞게 사용해야 하며 단지 모양이 멋지다는 이유로 사용하면 안 됩니다. 디자인을 콘텐츠보다 우선해서는 안 되고, 다운로드 시간이 불필요하게 길어도 안 됩니다.
이 목록에는 이미지 사용을 위한 몇 가지 기본 규칙이 있습니다.
- 올바른 형식을 사용합니다. 웹에서 즉시 사용 가능한 형식으로 그림을 저장해야 합니다. 일반적으로 로고, 차트, 드로잉 등의 간단한 그래픽에는 PNG 형식을 사용합니다. 약간의 음영 또는 그라디언트가 들어간 사진 및 이미지에는 일반적으로 JPG 형식이 보다 효과적입니다. JPG 형식을 사용하면 파일이 더 잘 압축됩니다. 즉, 1500kb 파일을 150kb로 줄일 수 있지만 일부 이미지 품질이 저하될 수 있습니다. 이미지 해상도는 유지하고 파일 크기는 줄일 수 있는 최적의 형식을 선택하십시오.
- 애니메이션은 주의해서 사용합니다. 애니메이션은 개념과 원칙을 데모로 보여줄 때 매우 효과적일 수 있지만 지나치게 사용되는 경우가 많습니다. 애니메이션이 자료에 집중하는 것을 방해하지 않아야 하며 허가를 받고 사용하십시오.
- 배경 이미지를 사용하지 마십시오. 배경 이미지 대신 흰색 또는 옅은 단색 배경에 어두운 텍스트를 사용합니다. 텍스트와 배경 간의 대비가 좋을 수록 읽기 편합니다.
- 파일 크기를 확인합니다. 페이지에 큰 이미지가 많으면 보기에는 좋을지 몰라도 이미지가 로드될 때까지 기다려야 하는 사용자 입장에서는 짜증이 납니다.
- 이미지를 자릅니다. 이미지 크기가 작으면 작을수록 영향력이 극대화되며 다운로드 시간이 줄어듭니다.
코스 크기 축소
코스를 만들 때 항상 크기를 염두에 두십시오. Blackboard 관리자가 기뻐할 것입니다. 교육기관에 코스 크기 제한이 있을 수 있습니다. 콘텐츠를 만들 때 업로드된 파일 크기를 최소화하여 전체 기간 동안 제한을 넘지 않을 수 있습니다. 이러한 권장사항은 교육기관 서버의 디스크 공간을 절약하는 데 도움이 됩니다. 교육기관마다 준수해야 할 추가 정책이 있을 것입니다.
비디오: 코스에 비디오 파일을 업로드하기보다 비디오를 링크할 수 있습니다. 대신, 비디오를 YouTube™, Vimeo 또는 캠퍼스에 있는 별도의 미디어 서버에 업로드한 다음 이를 코스 내에 링크합니다. 지적 재산권 규정에 유의합니다. 예를 들면 코스에서 사용하도록 허가를 받은 경우에도 National Geographic의 비디오를 Vimeo에서 호스팅하는 것은 불법일 수도 있습니다.
코스 파일 또는 콘텐츠 컬렉션: 큰 파일 크기와 삭제할 수 있는 미사용 파일 및 폴더를 찾습니다.
파일 크기 축소: 파일을 업로드하기 전에 다음 항목의 크기를 줄여 보십시오.
- Microsoft Office 파일: Microsoft Office에서 사용할 수 있는 도구로 슬라이드 프리젠테이션 및 Word 파일의 파일 크기를 줄입니다. 파일 크기 축소 옵션은 파일 메뉴에 있습니다. 업로드하기 전에 파일을 PDF로 저장할 수도 있습니다. 이렇게 하면 대개 크기가 더 작은 읽기 전용 버전의 파일이 생성됩니다.
- 이미지: 업로드하기 전에 그래픽 프로그램을 사용하여 화면에 표시할 이미지의 크기를 조정합니다. Shrink Pictures 또는 picresize®와 같은 온라인 서비스를 사용할 수도 있습니다.
- 오디오: 소프트웨어를 사용하여 오디오 파일을 다시 샘플링하거나 잘라 크기를 줄입니다.
트위터 지원 @BlackboardHelp