인터페이스 디자인 _ Endisk

1. Interface Design A299041김경수 A699017권순아 A699021길시은

2. Interface Design Introduction - ENdisk 목적 - 개인용, 업무용 웹 하드(스토리지) 임대 서비스 ( 인터넷을 통해 사용자들이 편리하게 파일을 공유할 수 있도록 하는 웹 서비스와 전용 소프트웨어 ) 주요기능 - 윈도우 탐색기를 닮은 인터페이스 - 그룹설정 기능 - 멀티 업/다운로드 기능 - 공유설정 기능 - 검색 기능 - 쪽지 기능 - 웹 링크 기능 주 사용자 - 인터넷을 통해서 자신의 자료를 백업하거나 다른 사람과 자료를 공유하고자 하는 인터넷 유저 사용자의 주요행위 - 필요한 자료 검색 -> 다운로드 - 내 폴더(웹 하드) -> 업로드 -> 자료 공유하기

3. Interface Design Background 주제 선정 이유 - 평소 이용 빈도가 높은 서비스임 - 공유와 관련된 다양한 기능과 자료들이 있음에도 주로 개인 자료 백업용으로 쓰이고 있음 - 탐색기의 인터페이스 이외에 ENdisk만의 특화된 기능의 부재

4. Interface Design Post-It 으로 만든 기존 구조도

5. Interface Design 기존 구조도의 Digital diagram

6. Interface Design 문제점과 의문점 문제점 - 웹 페이지와 전용 프로그램간의 로그인 충돌 - 중복되는 세부메뉴들이 존재함 - 검색 금지 단어들이 너무 많음 - 다운로드 포인트의 종류가 너무 다양함 - 포인트 충전방법과 과정이 복잡함 의문점 - 다른 파일공유 다운로드 서비스들은 웹 페이지면 웹 페이지, 프로그램이면 프로그램 하나에 다운로드와 설명, 결제등 모든 기능이 다 들어있는데 ENdisk는 왜 기능을 나눠서 웹페이지와 프로그램을 따로 만들었을까? - 마우스로 해결할 수 있는 문제인데 편집기능들이 메뉴가 꼭 따로 존재할 필요가 있을까?

7. Interface Design IA 관련 문제점 리스트 01) 많은 기능들과 광고들이 1depth에 나열식으로 집중되어 있다. 02) 두 번째 depth 에서의 main menu와 sub menu의 위치가 많이 떨어져있고 컬러도 다르기 때문에 sub menu라고 인식이 잘안되고 어디 있는지 찾기가 어렵다. 03) sub menu에서 맨 상단에 위치하는 명칭들이 main menu의 이름과 통일된 것도 있고 아닌 것도 있어서 헷갈린다. 04) 한 화면에서 중복된 기능의 아이콘들이 있다.(두 번째 depth로 들어오게 되면 오른쪽에 QUICK MENU가 있다. 중요한 기능 몇 개가 항상 따라다니게 되는데 왼쪽하단에도 중요한 것들을 따로 모아서 어느 페이지를 가도 뜨는 것들이 있다. 그런데 이 두 개에 겹치는 기능이 많다.) 05) 웹에서 개인페이지에 대한 정보를 보여주는 것이메뉴 안에 들어가 있지 않다. (보통은 개인정보 수정 등에 대한 메뉴가 따로 있기 마련이다.) 06) 회원가입 시 메뉴가 복잡하다 07) 회원가입 시 만 14세 미만인 사람의 경우 회원가입 할 수 있는 방법이 존재하지 않는다. 08) 엔코인 충전과정이 복잡하다. 09) FAQ는 로그인 없이 볼 수 있지만 Q&A는 로그인을 해야 볼 수 있다. 10) 웹사이트로 연결된 메뉴가 많아 계속해서 새 창이 뜨는 구조인 점이 불편하다. (프로그램상에서 특정 기능들을 사용할 때 에는 웹사이트로 갔다가 다시 프로그램으로 돌아와야 하는 점이 불편하다.)

8. Interface Design IA 관련 문제점 리스트 11) 프로그램과 웹에서의 같은 기능인데 하나는 버튼의 기능을 하고 하나는 그렇지 않다. (프로그램에서 웹과 같은 방식으로 로그인 상태(개인정보)가 표시되는데 프로그램에서는 아이콘이버튼의 기능을 하지 않고 단순히 정보만 보여주는 것이다.) 12) 프로그램에서 도움말 버튼을 누르면, 홈페이지의 전용프로그램 이용하기 메뉴로 링크되는데 서로 명칭이 달라서 이용자 에게 혼란을 준다. 13) 프로그램에서 각 메뉴들의 잘 묶여져 있지 않다. (자주 쓰는 메뉴들을 1depth에서 모두 나열하고 있다.) 14) 프로그램에서 공유와 공유설정은 같은 메뉴인데 depth로 나뉘어있다. 15) 일단 로그인 하고 나면 로그아웃의 메뉴가 없어서 다른 아이디로 로그인 하고 싶으면 프로그램을 다시 시작해야 한다. 16) 바탕화면에 있는 파일이 아니면 탐색기를 통해서 여러 번 번거로이 이동해야만 한다. (검색기능 등을 이용해서 단번에 파일을 찾을 수 있도록 하는 것이 좋겠다.) 17) 엔코인/ 엔포인트네이밍의 문제 (두 가지는 다른 기능이고 다른 방법으로 얻을 수 있는 것인데 네이밍이 비슷해서 사용자에게 혼동을 준다.) 18) 친구추가 시 서로 등록이 안되고 혼자만 친구추가 되어서 원활환 의사소통이 힘들다 19) 다운받고 싶은 컨텐츠를즐겨찾기 해놓을 수가 없다. 20) 저작권에 대한 알림 팝업 창이 업로드 할 때 뜨는데, 상단의 버튼으로 업로드 할 시에만 나타나고 드래그를 이용해 업로드 할 때에는 경고 창이 뜨지 않아 일관성이 떨어지고 사용자에게 필요한 정보가 전달되지 않는다.

9. Interface Design IA 관련 문제점 리스트 21) 엔 디스크 업/다운로드 큐실행 상태에서는 추가적으로 업로드 할 수 없다. 22) 새로 고침 기능에 대한 설명이 없다.(눌러봐도 상황이 전혀 변하지 않아 어떠한 상황에서의 기능인지 알 수 없었다.) 23) 프로그램 실행 시 공지사항의 게시판 기능을 메뉴에 넣지 않고 광고와 같이 취급해 사용자가 공지사항인지 알 수 없다. 24) 프로그램에서 쪽지기능이 메뉴에 들어가있지 않아 처음 사용자는 쪽지를 어디서 어떻게 보내는 건지 알 수 없다. 25) 파일 검색을 통한 분류만 있고 카테고리를 통한 분류나 검색은 존재하지 않는다.(검색을 해야만 파일이 나오고 영화, 음악으로 이미 분류되어 버튼을 누르면 파일이 나오는 카테고리가 없다.) 26) 검색이 됐을 경우에는 몇 개가 검색되었는지 결과가 나오지 않는다. (ex/30개가 검색되었습니다.) 27) 뒤로 가기 버튼의 문제 (뒤로 가기 버튼의 네이밍이…으로 되어 있는데 뒤로 가기 버튼인지 알 수 없다.) 28) 친구추가 메뉴의 아쉬움 (친구추가 메뉴가 다양해야 함. 이 메뉴는 알고있던 친구를 추가하는 기능밖에 되지 않는다.) 29) 다운로드 센터, 인디 붐, 클린엔디스크의 연결이 되있지 않음 (웹에서는 컨텐츠 들을 다른 사이트에서 받을 수 있는 유료 사이트들이 링크되어있는데 프로그램에서는 그 유료 사이트들이 링크되어있지 않아 들어가려면 웹을 통해 들어가야 한다.) 30) 편집 메뉴의 불필요함 (이 메뉴는 컨텐츠를 선택하는 마우스 선택의 문제인데 모두 선택, 반전과 같은 기능이 메뉴로써 존재한다는 것이불필요하게 느껴진다.)

10. Interface Design 대표 화면들과 이에 대한 Look and feel 관련 문제점 리스트 01) 웹에서 페이지 버튼과 등급버튼이 작아서 클릭하기 어렵다. 02) 웹로그인 창의 위치문제 (1depth일 때는 중요한 위치에 로그인 창을 두어야 사용자들이 잘 찾기 때문에 잘 보이는 곳에 놓지만 2depth일 때는 그 위치가 사람의 눈이 잘 가는 위치이므로 로그인 후에는 다른 중요한 것들이 위치하게 되는데 이 사이트에서는 로그인 된 개인정보표시가 되어있는 창이 계속해서 그 위치에 뜨게 된다.) 03) 웹에서 로그인 부분 박스에 자신의 회원 등급 메달 아이콘이 나오는데 버튼으로 인식되지 않는다. 04) Main menu와 Sub menu와의 관계 (2depth 에서의 main menu와 sub menu의 위치가 많이 떨어져있고 컬러도 다르기 때문에 sub menu라고 인식이 잘 안되고 어디 있는지 찾기가 어렵다.) 05) 네비게이션의 강조가 약하다. (있기는 있으나 잘보이지도 않고 보통은 메뉴상에서 알 수도 있는데 메뉴상에서도 표시해주지 않아 사용자의 현재위치를 알기가 어렵다.) 06) 프로그램이 윈도우 탐색기의 형태를 띄고 있어서 그런지 네비게이션 버튼이 아예 없다. 07) 버튼들의 명칭들이 간략하고 세부적인 설명이 뜨지 않아 처음 사용자는 어려울 수 있다. 08) 메뉴들간의 그룹핑이 잘 되어있지 않다. (비슷한 메뉴인데 위치가 멀리 떨어져 있어서 다른 기능인 착각을 불러일으킨다.) 09) 검색했을 시에 현재 페이지 상태표시와 이전, 다음 버튼들의 위치가 애매모호하다. 10) 검색 창과 회원정보의 위치 (다른 메뉴들을 배치하고 남는 구석 자리에 껴 넣은 것 같은 레이아웃이다.)

11. Interface Design 대표 화면들과 이에 대한 Look and feel 관련 문제점 리스트 11) 뒤로 가기 버튼의 문제 (크기가 너무 작아서 알아보기 힘들다.) 12) 쪽지버튼이 아이콘으로 굉장히 조그맣게 있어서 찾기가 힘들다. 13) 쪽지가 왔을 때 피드백이 느껴지지 않는다. (조그만 아이콘이 미세하게 깜박인다) 14) 대부분의 공간들을 네모박스 형태로만 디자인하여 답답한 느낌을 준다. 15) 가독성의 문제 (유독 웹보다 프로그램에서의 파일이름과 크기, 종류가 써있는 메뉴의 글씨가 너무 작아 가독성이 떨어진다.) 16) 컬러의 문제점 (중요한 기능, 메뉴의 컬러를 따로 지정해주지 않고 다 무난한 눈에 띄지 않는 무채색으로 만들어 중요한 기능을 바로 찾아야 하는데 그렇지 않고 여기저기 시선이 분산된다.) 17) 버튼에 마우스가 닿았을 때 피드백의 문제 (너무 미세한 변화가 있어서 느껴지지 않는다. 좀 더 마우스가 닿았을 때나 눌렀을 때 사용자가 더 확실히 알 수 있으면 좋겠다.) 18) 개인정보는 맨 위에 있고 엔코인, 포인트는 맨 밑에 있어서 찾기가 어렵다. 19) 친구추가 메뉴상의 문제 (이 메뉴가 아이콘 메뉴(자주 쓰는 기능을 빼놓은 곳)에는 있는데 맨 위의 원래 메뉴에는 없다.) 20) 맨 밑의 광고창과 다른 메뉴들과 별 차이가 없게 생겼다 (같은 박스모양으로 디자인하여 기능을 가지고 있는 메뉴인줄 알고 자꾸 눌러보게 된다.)

12. Interface Design 인터뷰 참가자 프로필

13. Interface Design TASK 진행 전 인터뷰 내용 분석

14. Interface Design ENdisk – Ideal Task 1 ①파일 선택->파일->파일다운로드 ③내 폴더 클릭->마우스 오른쪽 버튼->새폴더 ↓ 검색 창에 파일 이름 삽입 ↓ “검색”클릭 ↓ 자신이 올린 파일 확인 ↓ 다음”클릭 TASK 1> 폴더생성/ 다운로드/ 검색 ENdisk 상의 내 폴더 안에서 무한도전 폴더를 만들어서 081004_무한도전.avi파일을 업로드하고 검색 창에서 그 파일을 찾아보세요.

15. ENdisk – Ideal Task 2 Interface Design ④파일 선택->마우스 오른쪽 버튼클릭-> 다운로드 TASK 2> 친구추가/ 다운로드 kimtoma란 아이디를 친구 추가한 후 kimtoma의 TV방송폴더 안에 있는 081011_무한도전.avi파일을 내 컴퓨터의 바탕화면에 다운로드 받아보세요.

16. ENdisk – Ideal Task 2 Interface Design 새로운 방법 – 파일 더블클릭 ②파일 선택->파일 드래그 새로운 방법 ② 새로운 방법 ② ④파일 선택->마우스 오른쪽 버튼클릭-> 다운로드 ④파일 선택->마우스 오른쪽 버튼 클릭->다운로드 TASK 2> 친구추가/ 다운로드 kimtoma란 아이디를 친구 추가한 후 kimtoma의 TV방송폴더 안에 있는 081011_무한도전.avi파일을 내 컴퓨터의 바탕화면에 다운로드 받아보세요.

17. ENdisk – Ideal Task 2 Interface Design ④파일 선택->마우스 오른쪽 버튼클릭-> 다운로드 TASK 2> 친구추가/ 다운로드 kimtoma란 아이디를 친구 추가한 후 kimtoma의 TV방송폴더 안에 있는 081011_무한도전.avi파일을 내 컴퓨터의 바탕화면에 다운로드 받아보세요.

18. ENdisk – Ideal Task 3 Interface Design ①내 친구 목록 아이디 선택->마우스 오른쪽 버튼 ->“쪽지 보내기”클릭 TASK 3> 쪽지 주고받기/ 다운로드 경로설정 친구 추가된 kimtoma의 암호가 걸려있는 므흣 폴더 안에 있는 19_최신동영상.zip 파일을 쪽지를 보내서 비밀 번호를 알아낸 뒤 외장 USB에 다운로드 받아보세요.

20. 다른 파일공유 서비스와 명칭이나 과정이 비슷했기 때문에 쉬웠다는 의견도 있었다.

21. 공유설정이라는 메뉴를 어려워함

23. 파일, 폴더명 만으로 검색하게 되어 불편하다. (사용자 아이디 검색도 할 수 있도록 했으면 좋겠다.) -검색결과 페이지에서 정렬을 하는 방식이 오름차순인지 내림차순인지 모르겠다. -다음페이지 이동 시 “다음”이란 버튼 말고도 쪽수를 이용한 페이지 이동버튼도 있어야 될 것 같다. -날짜순의 검색결과 밖에 없어서 좋지 않다. -다운 시 엔코인 사용이 얼마인지 표시되있어야 할 것 같다. -결과표시를 스크롤바가 길더라도 한 페이지에 볼 수 있도록 하는 것이 좋겠다. -검색결과 속에 필요하지 않은 정보까지 같이 검색되기 때문에 원하는 정확한 정보를 찾는 것이 어렵다. (결과 내 재검색 필요) -현재 페이지 보여주는 창이 잘 안보인다. -총량이 뜨지 않는 점이 불편하다.

26. 아이콘이 큼지막해서 발견하기 쉬웠다.

28. 메뉴에는 쪽지기능이 포함되어있지 않다.

30. Interface Design 각 사용자 별 성향 및 특성

31. Interface Design 각 사용자 별 성향 및 특성

32. Interface Design Affinity Diagram

33. Interface Design Digital Diagram

34. Interface Design 부분적 해결안 도출

35. Interface Design 주요 문제점 문제점 1) 파일 업/ 다운로드의 다양한 사용방법을 사용자가 쉽게 알지 못해서 제대로 사용하지 못한다 문제점 2) 커뮤니티 기능이 활성화되지 않아서 공유 기능을 제대로 사용하지 못한다 문제점 3) 정보와 자료가 다양한데도 주제 별로 분류가 잘 되어 있지 않거나 검색이 힘들어서 사용하기가 힘들다

36. Interface Design Design Concept - Concept A : Individualization widget과 비슷한 형태 메인 메뉴는 트레이에 아이콘화되어 들어가고 위젯은 개인의 특성/취향에 맞춰 아이콘 메뉴 구성이 가능 (ex) 게임에서 보유아이템을 사용하는 것처럼) 3) 메인 페이지는 회원가입 시 개인의 관심사를 등록해 놓은 것에 맞춰서 그에 맞는 다운로드 데이터와 친구아이디를 보여줌 4) 이용자의 업/다운로드 등급에 따라서 등급 업그레이드 될 때마다 Endisk의 위젯 형태가 진화함 - Concept B : Community Channel 태그클라우드와 온라인 게임의 채팅창 기능을 응용하여 커뮤니티의 기능을 강조 검색과채널(카테고리)이 동시에 메인 페이지에서 보여지고 채널 별로 클릭하면 하위 채널로 이동 실시간 지식검색 기능을 태그 클라우드의 형태를 이용한 채팅 방 형태로 나타냄 자료들에 Tag및 댓 글을 달 수 있도록 하여 집단지성을 활용해 신뢰도를 보여줌 - Concept C : Automatic Service 1) 반복되는 작업의 수행을 최소한으로 줄인 사용자 맞춤 서비스 2) 매주,매월 업데이트 되는 파일 (프로그램, 드라마, 예능 프로그램 등)을 초기에 카테고리를 지정해서 설정해주면 자동으로 다운로드 받아줌 3) 바탕화면에 <업로드>폴더에 파일을 집어넣으면 인터넷이 연결되어 있는 동안 자동으로 자신의 웹 하드 공간으로 업로드 됨 4) 검색 시 몇 글자를 치면 사용자가 그 동안 검색해 온 히스토리에 따라서 가장 연관성이 많은 검색어를 검색 창 옆 공간에 아이콘화시켜 보여줌

37. Interface Design Concept IA와 기존 IA와의 비교 기존 IA Concept A Concept B Concept C

38. Interface Design Idea sketch - 초기 - Concept A : Individualization - Concept B : Community Channel - Concept C : Automatic Service

39. Interface Design Idea sketch - 발전

40. Interface Design Idea sketch - 확정

41. Interface Design Screen Design Prototype

42. Interface Design Screen Design SCREEN DESIGN

43. Interface Design Screen Design – mode A

44. Interface Design Screen Design – mode B

45. Interface Design Screen Design – mode C

46. Interface Design Screen Design – mode D

47. Interface Design ENdisk Scenario ENDISK SCENARIO

67. Interface Design ENDisk_END 감사합니다 :-)