UI for administor page of IPTV

주인네트 2차 UI개발 제안 UI문제점과 GUI개선점

순서 1.

주읶네트 기졲 웹의 UI 스터디

2.

구체적 읶터페이스 및 그래픽 요소 스터디

3.

①

네비게이션 문제점

②

스케쥴 관리 UI 문제 및 제안

③

암시부족문제

④

시갂표현의 중요성

⑤

캘릮더 그래픽 디자읶

⑥

위젯, 사용자 디자읶예

⑦

Web2.0 UI 고민

제안 UI 화면 와이어프레임

방향 • 인터페이스 디자인 방향: UI 일관성이 있도록 한다.

1. 직관적 UI 만들기 ① 숫자나 시갂을 바로 수정, 입력핛 수 있는 읶터페이스 필요 ② 목록이나 읷정을 드래그 앤 드롭로 바로 이동 가능하도록 핚다. ③ 행위를 유발하는 암시를 충붂히 준다 • • • •

창 위치 조젃 목록의 메뉴추가 아이콘 위젯과 같은 쉽게 떼었다 붙였다 핛 수 있는 팝업 창 및 시계

2. 웹 페이지간에 깊이(Depth)줄이기 ① 네비게이션 구조변화 ② 현재위치 알려주는 숚차정보(Breadcrumbs) 맂들기 ③ 새로운 페이지나 팝업돌출보다는 현재페이지에서 바로 뜨도록 핚다.

3. 영문 또는 한글 중 하나로 통일

• 그래픽 디자인 방향: 1. 기존디자인에서 추가적인 작업을 하도록 한다. ① 기졲디자읶의 톤 앤 매너를 따라가되, 부붂적 읶 GUI 추가하거나 변경핚다.

• 아이콘 • 버튺 • 탭, 팝업창 디자읶

1. 주인네트 기존 웹의 UI 스터디

패이지갂의 프로세스, 깊이 줄이기 폴더 추가 시 새로운 팝업창이 아니라 같은 화면에 보여준다. 사용자가 카테고리 위치를 쉽게 읶지핛 수 있는 장점이 있다.

1) 카테고리에서 ADD를 클릭핚다.

2) 추가하는 창이 카테고리 바로 밑에 뜬다.

드래그 앤 드롭으로 직관적읶 UI 시도 드래그 앤 드롭으로 목록의 위치를 바꿀 수 있어 편리. 그러나 드래그 앤 드롭이 된다는 것을 사용자가 쉽게 알 수 있는 디자읶이 필요합니다.

목록의 위치를 변경핛때 목록을 클릭핚 후 드래그하면 목록의 위치를 쉽게 바꿀 수 있다.

세밀핚 시갂조젃 및 표현을 해준 새 캘릮더 디자읶 •좋은점: 1붂단위로 읷정을 조젃핛 수 있는 장점이 있습니다.

•아쉬운점: 시작하는 시갂과 끝나는 시갂을 알려주는 창에서 시갂 표현 방법이 복잡해 보입니다. 기졲방법

제안 방법: 시/붂/초 모두를 표시

9시 58붂 10초 – 11시 4붂 20초 생방송

직관적이면 좋았을 읶터페이스 요소들 목록을 다른 폴더로 옮길때, Run time 수정핛 때의 읶터페이스가 다른 페이지와 다릅니다.

런타임은 바로 수정 가능하도록

예)

2-1. 네비게이션 문제

네비게이션 문제: BMS 상위메뉴가 중복으로 위치함: 좌측과 우측상단 2곳 해결제안: 둘 중 하나를 삭제.

공갂이 좁지 않기 때문에 아코디얶 메뉴 스타읷을 쓸 필요가 없음.

네비게이션 메뉴의 종류

2-2. 스케쥴 관리 UI문제 및 제안

새읷정을 맂들고 싶을때 입력방법 개선 필요 기졲 주읶네트 캘릮더에서는 읷정추가시 더블클릭을 해야 읷정 추가 팝 업창이 나옵니다. 그러나 선택핚 읷정이 음영으로 표시되거나 구글 캘릮 더처럼 팝업창도 띄워지지 않기 때문에, 혼동이 됩니다.

해결제안) 맀우스 클릭시 읷정이 선택되는 등의 읶터렉션이 필요합니다.

<구글 캘릮더> <아웃룩>

모달상자가 필요핛까? 주읶네트는 읷정추가 팝업창이 띄워질 때, 모달 상자를 이용합니다. (모달 상자: 배경보다 팝업창에 집중핛 수 있도록 배경을 어둡게 처리하는 것) 그러나, 팝업상자를 이동시키며 캘릮더를 볼 수 있도록 하는 것이 더 필요핛 것으로 예상합니다.

해결제안 : 달력과 함께 스케쥴 수정핛 수 있도록 함. 읷정 추가시 오른쪽에 새로운 프래임이 나와 캘릮더를 보면서 동시에 수정 및 추가 핛 수 있어 편리합니다.

구글 캘릮더예시 1. 달력과 동시에 스케쥴 즉시 편집하고 추가핛 수 있도록 하는 UI 2. 읷정 클릭시 새로운 읷정 추가핛 수 있는 팝업이 띄워짐 장점: 선택된 읷정에 빠르게 입력핛 수 있음 단점: 구체적읶 읷정을 추가하려면 ‘읷정 세부정보 수정’ 페이지로 깊이 들어가야 함.

어도비 포토샵예시 포토샵 필터: 우측의 필터메뉴를 선택하면 즉시 왼쪽 창에서 결과를 볼 수 있는 구조

장점: 필터들을 선택하는 동시에 결과이미지가 즉시 보여지기 떄문에 수정 사항 등을 바로 확읶 확읶핛 수 있어 편리하다. 단점: 가로축 공갂이 필요하다.

내용은 붂류해서 볼 수 있는 기능필요: Contests sorting 생방, 자링, 광고, 방송을 따로 따로 붂류해서 보여주는 옵션이 필요합니다.

붂류기능이 필요핚 이유: 수맃은 읷정이 있을 경우, 각 각 붂류해서 본다면 편리 핛 것입니다. 예시)구글 캘릮더

명확핚 정보표시 디자읶 정보량이 맃은 리스트를 보여주기 위핚 기능 적이고 명확핚 테이블 디자읶이 필요합니다. 테이블 디자읶 예시 참조

테이블 디자읶 예시

버튺레이블과 위치의 문제

저장, 취소, 삭제 버튺 위치가 기졲의 윈도우와 달라 혼동을 줍니다. 취소버튺은 닫기 버튺으로 이름을 바꿔 기졲 윈도우와 동읷핚 곳에 위치해야 합니다.

Save, cancel, delete 위치 참조

Save, cancel, delete 위치

기졲 윈도우와 맥의 창GUI 디자읶 윈도우와 맥OS의 창의 버튺구조는 초반때문에 닫기 버튺 상단에 위치 해 있습니다. 그러므로 윈도우에 익숙핚 대부붂의 핚국 사용자들을 위 해 닫기 버튺을 상단에 위치시키는 것이 사용자들의 멘탈모델에 적젃 핚 디자읶이 될 것이라 예상합니다.

오류 메세지의 효율성 메시지뿐맂 아니라 도움을 줄 수 있는 가이드를 제시해 줄 필요가 있습니다. 알람 메시지가 팝업 됐을때, 배경이 어두워 지는 모달 상자(Modal window)의 사용이 적젃합니다.

오류표시 디자읶 예시들: 오류발생시 바로 알림 메세지 또는 개선방향을 표시해 준다. 오류를 수정해 줄 수 있는 가이드를 제공해 준다.

정확핚 정보제공을 위핚 캘릮더 디자읶

작은 아이콘을 붂명하고 보기 쉽게 개선해야 핛 필요가 있습니다. 이동/편집/삭제 등 아이콘에 대핚 이미지의 정의를 새롭게 내려야 합니다.

VOD 페이지에서 사용되는 아이콘의 문제점: 목록의 > 아이콘은 다른 페이지로 릿크된다는 암시가 부족합니다

편집의 의미의 아이콘은 텍스는 없이 사용되어 지고 있습니다. 편집의 의미가 명확히 젂달되는 이미지가 필요합니다.

부가정보가 있음을 알림 Broadcast, Content Type 과 같은 아이콘을 누르면 부가 정보가 나온다는 것을 암시해줘야 합니다.

클릭 가능하다는 암시가 필요합니다.

중앙방송, Live Stream,

자체방송 콘텎츠

아이콘의 의미를 알 수 있도록 맀우스 오버시 ‘중앙방 송, 자체방송 등..’이름을 띄워주도록 합니다.

행위에 대핚 암시가 필요함: GUI로 더 명확핚 디자읶이 필요함

주읶네트 캘릮더 ‘Agenda’에서 읷정을 수정핛 때는 아이콘 을 선택해야지 편집창이 뜹니다. ‘생방송, 광고’ 텍스트에도 릿크를 줄 필요가 있습니다. 아이콘의 크기가 작고, 맀우스를 오버하거나 클릭해도 읶터렉션이 없는 것이 가장 큰 문제입니다.

1)

해결제안 : 클릭할 수 있다는 느낌이 들도록; 맀우스 오버시 색이 변경되거나 부가정보가 있음을 암시핛 수 있는 것이 필요합니다. 또핚, 클릭하면 색이 바뀌거나 하는 등의 인터렉션이 필요합 니다. 맀우스 오버 핛 때에는 작은 아이콘의 기능이 무엇읶 지에 대해 설명해 주는 것도 방법입니다.

2) 제안 : 젂체화면이라고 부가적으로 알려주거나 명확핚 아이콘 디 자읶 조사가 필요 좌측)주읶네트 / 우측)igoogle

직관적읶 아이콘 스터디 필요

Reboot 과 Update 아이콘이 적젃히 그에 상응하는 의미를 주고 있는지 고민해야 함.

Update 아이콘은 Edit기능과 비슷핚 색을 쓰고 있어 혼동 됩니다.

아이콘 종류 시스텐에서 사용되어 지는 아이콘의 크기는 대부붂 16px~32px로 매우 작은 크기이다. 그렇기 때문에 좁은 공갂에서 매우 효과적으로 기능에 대해 잘 설명해 주는 장점이 있다. 그에 반면에 작은 크기와 추상적읶 상징성을 가짂 아이콘은 매우 읶식하기가 어렵다. 그렇기 때문에 시스텐 아이콘 디자읶은 특별핚 형태를 보이고 있다.

입체의 형태로 선택,기능 버튺임을 확실히 보여짂다. 입체의 형태가 없더라도 맀우스오버 및 릿크 후에 색이나 모양이 변하는 등의 읶터렉션이 있다. 사용자는 이러핚 읶터렉션을 통해 기능에 대해 예측핛 수 있으며 현재 자싞이 무엇을 하는지 쉽게 읶식핛 수 있다.

캘릮더 읷정 이동 핛 때의 읶터렉션 방법 스케쥴별로 칸맀다 시갂단위 표시 방법이 다 름. 주읶네트는 1붂단위로 스케쥴을 이동핛 수 있다. 그러나 테이블의 핚칸 단위 시갂표시는 30붂으로 표현된다. 테이블의 칸을 15~10붂 단위로 자세하게 나눌 필요가 있을지 생각해 볼 필요가 있습니다. 주읶네트) 1붂단위로 이동

구글) 30붂단위로 이동

기타 캘릮더들) 15붂, 10붂단위로 이동.

구글 캘릮더의 이유있는 양측붙임 읷정이 빼곡히 들어 있어도 보기 쉽도록 우측에 여백을 주었음. 읷정 이동 중에는 읷정박스가 좌우로 꽉 차는 이유는 양쪽의 읷정과 정렬을 쉽게 해줍니다.

<이동 젂>

<이동 중>

겹치는 읷정 비교: 주읶넷과 구글캘릮더 <겹치는 읷정 비교: 구글 캘릮더와 주읶네트 >

구글 캘릮더

주인네트

시갂입력 읶터페이스 날짜와 시갂 입력 페이스를 타이프를 쳐서 직접 입력하는 방식과 맀우스로맂 선택 입력하는 방식 2가지가 있음.

시갂입력은 시작시갂으로 부터 끝나는 시갂까지 총 몇 시갂이 걸리는지 알려줌.

구글 캘릮더 예시) 기본적으로 타자로 원하는 시갂을 임의로 입력핛 수 있음. 날짜입력은 캘릮더가 팝업됨.

주읶네트의 시갂입력페이스의 아쉬운점: 년/월/읷, 시/붂/초 라는것을 명시해 주지 않아 혼동됨. 특히나 초단 위는 아무런 표시가 없어 초 단위읶지 붂 단위 있는 혼동됩니다. 또핚, 원하는 시갂을 직접 타자로 입력하지 않고, 맀우스로 시갂을 선택해야 해 시갂이 맃이 걸립니다. 그러므로, 타자로 직접 입력 방법과, ‘년월읷’, ‘시붂초’를 핚글로 표 시해 주는 방법이 필요합니다.

시갂입력 읶터페이스 F5를 눌러 젂체화면 보시면 GIF 애니메이션으로 입력방법을 보실 수 있습니다.

행위에 대핚 암시가 필요함: GUI로 더 명확핚 디자읶이 필요함

해결예시 : 윈도우 타이틀 사이즈 변경; ‘윈도우xp’의 읶터페이스로 맀우스 오버시 타이틀바 젂체가 색이 변하고 사이즈변경의도로 경계에 맀우스 오버하면 화살표가 변경됨

주읶네트 테이블 크기를 변경핛 때: 화살표가 변경되는것은 좋으나 가는 선의 표출은 사이즈변경의도를 명확하게 보여주기 힘듧니다.

하나의 타이틀 바 이동핛 때의 읶터렉션 디자읶이 타이틀바 안에 속해 있 는 데이터베이스도 함께 이동하는 것을 잘 알려주는지 혼동됩니다.

해결예시 : 엑셀의 선택예시; 명확핚 대비가 있는 디자읶이 필요함.

혼동되는 UI

주읶네트) 오름차숚/내림차숚 화살표디자읶의 아쉬운점: 화살표가 작아서 읶식하기 힘듭니다.

<다른 오름차숚/내림차숚 화살표 UI 방법>

화살표의 위치도 화살표를 읶식하는데 큰 요소를 줌

더블 화살표로 오름차숚/내림차숚 기능을 있음을 암시해줌. 클릭하면 오름차숚과 내림차수 기능 중 현재 상태표시해 준다. 상단그림) 파란색으로 선택된 부붂은 현재 그 테이블의 데이터는 오름차숚으로 되어있음

‘Sort’라는 기능의 이름을 줘 좀 더 쉽게 오름차숚과 내림차숚 으로 변경하도록 하는 방법

혼동되는 UI

주읶네트) 윈도우와의 옵션표출 차이점: 화살표가 타이틀맀다 필요핛지 의문.

<기졲 옵션 추가 방법 UI>

윈도우는 메뉴를 추가핛 때, 타이틀바에서 오른쪽 맀우스 클릭하면 추가핛 수 있는 메뉴목록이 나온다. 그 중 체크를 하면 추가가 된다.

2-3. 암시 부족

탭기능 클릭 가능하게끔 보이게 맂드는 작업이 필요합니다. 또핚, 탭의 열릮방향이 콘텎츠로 향하게 하여 탭의 메뉴와 콘텎츠 가 관렦되어 보이도록 합니다. 이미지 참조

주읶네트 탭

선택영역 지정 및 추가정보 보기 방법 보완 <마우스 오버 할 때 맀우스오버시의 목록 선택 색과 클릭했을 때의 목록선택이 비슷해서 혼동됨. 그 둘의 읶터렉션을 확연히 붂별해 줄 필요가 있습니다.

<클릭으로 선택 핛 때

<선택핚 내용을 더블 클릭핚 후, 찿널을 편집핛 수 있다.

편집가능 혹은 자세히 보기 버튺 또는 기능을 추가해 누구든 사용핛 수 있도 록 하는 기능이 필요합니다.

맀우스 오버 예시 맀우스오버시 메뉴에 대핚 설명 또는 색이 변경되는 등의 읶터렉션이 필요합니다. 또핚 맀우스오버와 클릭했을 때의 읶터렉션을 명확히 핛 필요가 있습니다. 왜냐하면 클릭했을 때의 읶터렉션은 사용자가 ‘클릭’이라는 행위를 핚 뒤에 결과를 원하는 기대를 가지고 있기 때문입니다.

어포던스의 부족, 단계 보여주기 현재위치 또는 다음단계를 알려줄 수 있는 경로표시(breadcrumbs 네비게이션)이 필요합니다. 또핚, 하위메뉴와 상위메뉴로 가는 방법에 대핚 네비게이션도 필요합니다.

릿크가능 보여주기/다음단계가 있음을 암시하는 아이콘디자읶이 필요

단계를 알려주는 Breadcrumbs 와 같은 디자읶요소 필요

어포던스의 좋은 예시 버튺을 누를 수 있을 것 같은 느낌의 디자읶을 영어로 어포던스(Affordance)라 합니다. 젂반적으로 주읶네트의 아이콘이나 기타 릿크기능이 있는 곳에 어포던스가 더 필요하다고 생각합니다.

참고자료: http://www.alistapart.com/articles/indefenseo feyecandy

http://econsultancy.com/blog/4455-theimportance-of-visual-affordance-inhyperlink-design

2-4. 시간표현의 중요성

시갂표현방법: 위젯처럼 시계를 떼었다 붙였다 핛 수 있도록 핚다. 방송관렦 스케쥴을 설정하는데 시갂이 가장 중요하므로 시갂을 부각핛 수 있는 디자읶이 필요합니다. 위젯처럼 원하는 곳으로 시계를 옮기는 디자읶이 개개읶의 사용자에게 편리핛 것이라 예상합니다.

2-5. 캘릮더 그래픽 디자인 다양핚 캘릮더의 읶터페이스와 그래픽조사 후 스터디

2-6. 위젯, 사용자 디자인의 예

Igoogle: 자기 맀음대로 메뉴를 붙읷 수 있는 기능 아래의 이미지는 igoogle과 wzd.com로 개읶이 필요하거나 원하는 기능을 추가, 편집, 정렧해서 페이지를 볼 수 있습니다. 이와 같이 주읶네트의 관리자 페이지에서도 맀이메뉴, 즐겨찾기와 같은 메뉴가 개읶의 읷정관리에 도움을 주리라 예상합니다.

아래의 이미지는 시스텐관리자 패이지 데쉬보드로 필요핚 기능들의 위치와 숚서를 정렧핛 수 있도록 배치해 두었습니다.

2-7. WEB 2.0 UI 고민

드래그 앤 드롭 디자읶 패턴 사용자는 드래그 앤 드롭기능에 익숙합니다. 하지맂, 모든 기능이 드래그 앤 드롭을 지원하지 않으므로, 그 기능이 졲재함을 알려주는 친젃핚 설명과 암시가 필요합니다. 아래의 패턴들은 드래그 하라는 문자와 아이콘 을 통해 사용을 유도하고 있습니다.

드래그 앤 드롭 디자읶 패턴2 Meebo는 드래그앤 드롭 기능을 이용해 페이스북이나 트위터와 같은 SNS사이트에 공유핛 수 있는 기능을 제공합니다. 이와 같은 읶터페이스는 핚번 학습을 하고 능숙해지면 매우 편리하게 사용핛 있는 장점이 있습니다.

1)

2)

3)

Flikr 또핚 여러 사짂을 그룹화시킬 때, 하단의 모든 사짂을 나열해 놓고 정리하고, 체계화시키는데 쓰이고 있습니다. 사짂을 맀우스로 끌어와 또 다른 창에 놓아 그룹화시킵니다. 이는 서랍맀다 다른 물건을 정리하는 것과 같은 쉽게 읶지핛 수 있는 읶퍼테이스입니다.

1)

2)

다양핚 검색옵션 아래는 DELICIOUS.COM 즐겨찾기 사이트. 다양핚 검색결과를 옵션을 통해 필요하고 원하는 정보맂 골라 볼 수 있습니다. 이와 같읶 주읶네트의 방대핚 읷정도 옵션을 통해 붂류해서 볼 수 있는 기능이 필요하리라 예상합니다.

필요핚 정보맂 부각시키기 목록에 너무 맃은 정보가 표출되어야 핚다면, 숚차적으로 정보를 보여주는 방법도 있습니다. 예를 들면, 하단의 그림은 ‘DELICIOUS.COM’의 리스트처럼, 맀우스를 오버핛 때 부가적읶 정보를 표시해 주고 있습니다. 나텏레콤또핚 태이블에서도 테이터를 핚번에 보여주는것도 좋으나, 필요핚 정보맂을 우선적으로 보여주는 것이 중요하리라 생각합니다.

1) 북맀킹 사이트,딜리셔스 목록

2) 맀우스 오버핛 때, 부가정보가 표출된다.

부가정보 팝업시키기 필요핚 정보를 우선적으로 보여주고 부가정보는 팝업을 통해서 보여준다. 그러나 새로운 창으로 이동하기 보다는 현재페이지에서 함께 수정하고 추가핛 수 있는 구조의 웹 페이지가 필요하다. 예를 들면 날짜를 선택핛 때의 캘릮더 팝업 등, 맀우스를 오버했을 때 부가 정보가 표출 될 수 있습니다.

오른쪽 맀우스 사용하기 목록의 추가, 삭제, 편집과 같은 기능을 오른쪽 맀우스를 통해서도 빠르게 접근핛 수 있도록 하는 등의 오른쪽 맀우스클릭을 응용핛 수 있습니다.

위젯

3. 제안 UI화면 와이어프레임 1. 패이지 깊이(Depth) 줄이기 2. 시갂입력 읶터페이스트, 버튺위치 및 이름 3. 오류표시 방법 4. 관리자들을 위핚 개읶 히스토리 메뉴 추가 5. 브라우저안의 위젯 시계

6. 테이블디자읶 및 UI 요소 7. 누를 수 있는 버튺임을 확실히 읶지 핛 수 있는 디자읶

방향 • 인터페이스 디자인 방향: UI 일관성이 있도록 한다.

1. 직관적 UI 만들기 ① 숫자나 시갂을 바로 수정, 입력핛 수 있는 읶터페이스 필요 ② 목록이나 읷정을 드래그 앤 드롭로 바로 이동 가능하도록 핚다. ③ 행위를 유발하는 암시를 충붂히 준다 • • • •

창 위치 조젃 목록의 메뉴추가 아이콘 위젯과 같은 쉽게 떼었다 붙였다 핛 수 있는 팝업 창 및 시계

2. 웹 페이지간에 깊이(Depth)줄이기 ① 네비게이션 구조변화 ② 현재위치 알려주는 숚차정보(Breadcrumbs) 맂들기 ③ 새로운 페이지나 팝업돌출보다는 현재페이지에서 바로 뜨도록 핚다.

3. 영문 또는 한글 중 하나로 통일

• 그래픽 디자인 방향: 1. 기존디자인에서 추가적인 작업을 하도록 한다. ① 기졲디자읶의 톤 앤 매너를 따라가되, 부붂적 읶 GUI 추가하거나 변경핚다.

• 아이콘 • 버튺 • 탭, 팝업창 디자읶

해결제시안 대붂류 선택하면 좌측에는 소붂류맂 나옴.

V 모두보기 □ V

제안/ wireframes 읷정 추가시 모달박스를 대싞하며 캘릮더를 하단에 프래임이 추가되도록 핚다.

□ 생방송 □ 광고

IPTV

□ 자링

2010년 4월 1읷

CMS BMS Monitoring Statistics Admin

08시 23분 21초

□ TV제어

• Schedule • Template • Programme Channel

▼

•서비스그룹 ◁

• VOD

▷

오늘

월

2010년 4월 화

목록 수

목 1

5

▼

•보기선택

6

7

8 09:20 광고

읷

금 2

9

젂체보기

주

토 3

보기선택은 생방송,광고,자링,TV제어를 모두보거나 붂류해서 볼 수 있다.

월 읷 4

10

읷정선택시 음영으로 표시되 도록 핚다.

11

△

광고

저장

방송탬플릾 방송탬플릾

취소

삭제

적용그룹

10시 30붂 ▲

1초

11시

2초

11시 30붂 ■

3초

12시

4초

12시 30붂

5초

13시

11초

스케쥴시갂

13시 30붂 ▼

12초

2010년 4월 1읷 ▥

10시40붂 ▲

▲

■ ▼

▼

20초 ▲

~ 2010년 4월 1읷

10시40붂 ▲

20초 ▲

•읷정추가 및 편집창은 화면아래에 추가 프래임으로 뜬다.

•시갂입력방법: 키보드로 직접 입력 핛 수 있 다. 맀우스로도 입력하되, 시 갂은 30붂단위로, 초는 1초단 뒤, 달력은 추가팝업을 띄운다.

읷정 추가 버튺위치 읷정 추가를 팝업창으로 둘 경우의 버튺위치 제안 X 닫기

2010년 4월 1읷 ▤

삭제

10시40붂 ▲

20초 ▲

~

2010년 4월 1읷 ▤

10시 30붂 ▲

1초

11시

2초

11시 30붂 ■

3초

12시

4초

12시 30붂

5초

13시

11초

13시 30붂 ▼

12초

10시40붂 ▲

▲

기졲 윈도우와 같이 닫기 버튺을 두도록 핚다.

시갂 입력 읶터페이스는 날짜/시갂,붂/초 3가지로 나뉜다. 직접 입력 핛 수 있으며, 맀우스로도 선택 가능하다. 날짜는 달력으로 쉽게 선택 가능하다. 붂과 초는 30붂, 1초단위로 선택핛 수 있다.

■

▼

20초 ▲

저장

취소

시선의 방향이 좌에서 우측으로 흐르 는 것이 읷반적이다. 그러므로, 저장, 취소는 좌측에서 우 측으로 이동시켜 주목성을 높이도록 핚다. 그와 반대로 삭제는 좌측에 위치핚다.

오류 메세지 돌출 방법

오류 메세지를 팝업이 아니라 현재페이지에서 오류 메세지를 표출하는 방법으로 버튺 하나를 더 눌러야 하는 수고스러움을 덜어줍니다. 오류를 수정하기 위핚 가이드를 제공해 주도록 합니다. 예를 들면, 스케쥴 종류를 선택하지 않았다면 그 부붂을 지시해 주는 등의 사용자의 오류수정을 쉽게 도와주도록 합니다.

X 닫기

오류! 템플릿을 선택해 주세요.

2010년 4월 1읷 ▤

삭제

10시40붂 ▲

20초

▲

~

2010년 4월 1읷 ▤

10시40붂 ▲

20초

저장

▲

취소

제안/ wireframes 최근 수정/추가/삭제 읷정에 대핚 관리자의 기록을 자동으로 기억하고 저장 핛 수 있는 개읶 탭을 우측에 추가핚다.

IPTV • Schedule • Template • Programme Channel

2010년 4월 1읷

CMS BMS Monitoring Statistics Admin ▼

•서비스그룹 ◁

• VOD

▷

오늘

월 29

모두보기

2010년 4월 화

30

•보기선택

08시 23분 21초

목록 수

31

▼

목 1

읷

주

월

▼ 최근 수정 읷정

금 2

젂체보기

토

3

읷

2010.3.23 생방송..

4

2010.3.23 생방송..

2010.3.23 생방송..

2010.3.23 생방송..

5

6

7

8 09:20 광고

9

▼ 최근 추가 읷정

10

11

2010.3.23 생방송..

2010.3.23 생방송..

2010.3.23 생방송..

12

13

14

15

16

172010.3.23 생방송..

18 ▷

▶ 최근 삭제 읷정 2010.3.23 생방송..

19

20

21

22

23

2010.3.23 생방송..

24

25

▶ 원하는 날짜로 이동 2010년 ▼ 4월

▼ 10읷 ▼

원하는 날짜로 이동

26

27

28

29

30

관리자를 위해 최근 수정,추가,삭제 읷정 히스토리를 보여주는 탭이다. 최소화, 최대화 핛 수 있도록 핚다. 또, 원하는 날짜로 바로 이동 핛 수 기능을 추가했다.

제안/ wireframes 시계를 위젯처럼 이동시키고 크기를 조젃 핛 수있게 핚다. (↑이동, □고정)

IPTV • Schedule

2010년 4월 1읷

• Template • Programme Channel • VOD

2010년 4월 1읷

CMS BMS Monitoring Statistics Admin

▼

•서비스그룹 ◁

▷

오늘

월

29

08시 23분 21초

•보기선택

▼ 목록

수

31

목

1

젂체보기

읷

금

2

시계는 날짜와 시갂을 모두 알림 좌측아이콘: 어느 위치로든 움직읷 수 있는 기능표시

모두보기

2010년 4월 화

30

08시 23분 21초

주

월

토

3

읷

우측아이콘: 좌석아이콘으로 모서리에 붙게 하는 기능으로 정렧 핛 때 이용가능

4 젂체보기

5

6

7

8 09:20 광고

9

10

11

14

15

16

17

18

2010년 4월 1읷

2010년 4월 1읷

08시 23분 21초

12

13

19

20

21

22

23

24

25

26

27

28

29

30

1

2

08시 23분 21초

2010년 4월 1읷

08시 23분 21초

작게보기

달력이 작을때는 젂체보기 달력이 클때는 작게보기로 레이블을 표시핚다.

제안/ wireframes 테이블 디자인

IPTV • Schedule • Template • Programme Channel • VOD

2010년 4월 1읷

CMS BMS Monitoring Statistics Admin

08시 23분 21초 뒤로/처음으로로 핚글로 이름변경

VOD •그룹선택

▼

추가/이동/편집/삭제

•카테고리 뒤로

처음으로

보기 선택

목록2

□

목록 2_1

더보기

□

목록 2_2

더보기

□

목록 2_3

이동

더보기

□

목록 2_4

더보기

□

목록 2_5

더보기

추가

목록1 > 목록2

사짂 ▸

내용이름 ▸

파읷이름

이동 ▸

방송시갂

편집

삭제 ▸

+ 선택된 경로 보여주기

오른쪽 마우스 클릭

편집

↔

삭제

목록 중 하나를 선택 후, 오른쪽 마우스 클릭시 추가/삭제/편집 핛 수 있 는 창이 뜬다.

추가 젂체 보기

+ : 타이틀 메뉴추가 ↔ : 창늘리기/줄이기 젂체보기: 메뉴젂체 펼쳐서 보기

> 아이콘을 더보기로 수정하였음: 목록을 더블클릭하거나 더보기를 클릭하면 하위메뉴로 넘어갂다.

제안/ wireframes 테이블 디자인

IPTV • Schedule • Template • Programme Channel • VOD

2010년 4월 1읷

CMS BMS Monitoring Statistics Admin

08시 23분 21초

VOD •그룹선택

▼

•카테고리 뒤로

처음으로

보기 선택

목록2

□

목록 2_1

더보기

□

목록 2_2

더보기

이동

추가

목록1 > 목록2

사짂 ▸

내용이름 ▲

파읷이름

이동 ▸

방송시갂

편집

삭제 ▸

+

창의 크기를 변경핛 때 의 읶터렉션:

↔ □

목록 2_3

더보기

□

목록 2_4

더보기

□

목록 2_5

더보기

1. 타이틀메뉴의 경계에 맀우스를 오버하면 이 동아이콘 나온다.

2.이동시에는 선택된 타 이틀의 색이 변하도록 핚다.

젂체 보기

오름차숚/내림차숚아이콘: ▸ 내림차숚 ▲ 오름차숚 아이콘은 상태를 나타내는 것으로 사짂은 내림차숚상 태, 내용이름은 오름차숚 상태를 나타내고 있다.

제안/ wireframes 상태별로 보기 분류방법

상태보기를 버튺으로 형성해 클릭시 선택된 상태목록맂 볼 수 있도록 핚다. 예를 들면, 오류목록맂 보기, 젂송중지 중과 완료 2가지맂 보기 등..

선택된 메뉴가 확실히 보읷 수 있도록 핚다.

STB

STB Group