gr board ui 개선 프로젝트

39

Upload: guleum-lee

Post on 25-Jan-2015

644 views

Category:

Documents


4 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Gr board ui 개선 프로젝트
Page 2: Gr board ui 개선 프로젝트
Page 3: Gr board ui 개선 프로젝트
Page 4: Gr board ui 개선 프로젝트

XHTML 1.0 Strict를 적용한 국내 최초의 웹 표준 게시판 지금은 HTML5를 단계적으로 적용 중

BUT! UI, UX 디자인 측면에선 변화가 없다 싫어요

Page 5: Gr board ui 개선 프로젝트

예쁘지 못한 디자인

UX, UI의 불편함

사용자 감소

통일되지 않은 디자인

어려워요

복잡함

사용자 매뉴얼이 없어요

기능도 기능이지만, 사용하기가 불편해서 못쓰겠다!

예쁜 사용자 테마, 플러그인도 없고 근데 기본테마는 더 안예뻐. 나 안쓸래.

얘는 이렇게 생겼는데, 왜 다른거지?

있으나 업데이트 안 한지 오래. 프로그램에 내장되어 있는 건 봐도 무슨 말인지 모르겠어요.,

복잡 복잡 @_@

보기엔 간단한데 사용하기 어려워요.

Page 6: Gr board ui 개선 프로젝트

UI, UX 디자인을 개편하면? UI, UX 디자인을 개편하면?

Page 7: Gr board ui 개선 프로젝트
Page 8: Gr board ui 개선 프로젝트

사용자 외부디자인

Page 9: Gr board ui 개선 프로젝트

통일되지 않은 디자인 + 제한적인 사용자 외부테마 (스크랩북은 사용자 테마설정지원이 없음)

Page 10: Gr board ui 개선 프로젝트

담기, 신고기능이 게시물에만 존재할 뿐 신고내역과 담기 목록을 따로 확인할 수 없거나, 확인할 수 있는 방법이 복잡함.

0

Page 11: Gr board ui 개선 프로젝트

글쓰기 폼의 길이가 넓은 GR BOARD, 스크롤에 미니사전과 설문조사가 가려짐에도 불구하고 하단에 위치.

-> 이용불편 + 이용빈도 낮아짐

0

Page 12: Gr board ui 개선 프로젝트

샐럭트 옆에 전송버튼이 존재하지 않아, 자바스크립트를 지원하지 않는 환경에서 카테고리 변경 불가능. + 키보드 접근 불가능 -> 낮은 접근성

0

Page 13: Gr board ui 개선 프로젝트

1. 웹 트랜드를 반영하지 못한 디자인

2. 기능적인 부분만 중시, 배치 접근성을 고려하지 않은 문

3. 기타 사용자 입장에서 발생하는 여러 문제들..

Page 14: Gr board ui 개선 프로젝트

관리자 내부디자인

잠깐!

관리자 내부디자인이 개선이 중요한 이유는?

• 사용자 외부디자인은 사용자테마로 80% 이상 극복 가능하지만, 관리자 내부디자인은 불가능.

• 사이트 운영시, 관리가능이 복잡하고 어려우면 실질적으로 사용하기 편한 다른 프로그램을 이

용할 수 밖에 없음 -> 사용자 유출

Page 15: Gr board ui 개선 프로젝트

간략해 보일 수 있으나, 정보가 한꺼번에 압축되어 있기 때문에 처음 설치시 초보자들에게 어려움과 혼란을 줄 수 있다.

00

GPL 라이선스 전문 내용을 볼 수 없다. GR BOARD에 탑재된 다른 프로그램들의 라이선스를 확인할 수 없다.

과정과 ‘(현재)’ 표시로 위치를 알려주지만, 관리자정보 입력화면 에선 레이아웃 을 유지하는게 아니라 기본 가입테마창만 띄어주기 때문에 혼란가능성이 큼.

00 어디는 이미지로고, 어디는 텍스트 로고… 통일성이 없다!

Page 16: Gr board ui 개선 프로젝트

게시판 관리자 권한을 가졌을 경우, 게시물 관리 화면. 재대로 디자인이 입혀지지 않았으며, 선택된 게시물 목록에서 별도로 잘못 선택한 게시물

의 체크박스 해제가 불가능함. (사용자 편의기능)

실제 사이트 운영할 때에 관리 디자인과 사이트디자인과의 괴리감 발생.

Page 17: Gr board ui 개선 프로젝트

00

일자로 나열된 설정/정보들. 복잡함과 공간의 효율성이 떨어진다.

+ 스크롤의 압박

Page 18: Gr board ui 개선 프로젝트

00 현재 GR BOARD는 그룹에 대한 특별한 기능이 없다. 굳이 그룹과 관리기능을 나눌 필요가 없다. 또한 메뉴의 길이가 늘어 복잡하게 된다. 00

DB백업, 코드생성, GR BOARD 업데이트, GR BOARD 삭제는 기본적인 관리기능에 속하기 때문에 따로 통합하여 제공하는 것이 더 효율적이다.

Page 19: Gr board ui 개선 프로젝트

00

관리자 첫 화면의 현재상황은 간단한 상황을 보여줘야하는데도 불구하고 불필요한 정보가 많다. 또한 설정관련부분도 포함되어 있다.

오히려 관리자들은 사이트운영 (게시판/댓글)의 비중이 많기 때문에 최근 게시물과 댓글 기록이 처음탭에 위치하는 것이 더 적절하다.

첫 화면에서 서브페이지 테마와 금지단어를 설정해야하는 이유가 뭘까? 오히려 관리메뉴의 신고 메뉴와 같이 따로 관리메뉴로 빠져야하거나 별도로 통합하여 제공해야한다. 메뉴, 배치구성이 잘못됨.

Page 20: Gr board ui 개선 프로젝트

1. GR BOARD의 특성을 파악하지 못함 (GR BOARD의 대부분의 사용자는 타 게시판에서 넘어옴 -> 데이터 변환을 별도의 복잡한 과정을 거쳐 진행해야 함.)

2. 사이트 운영중에 발생한 모든 오류를 한곳에서 보고 관리할 수 있는 기능이 없음.

3. (현재, 오류보고는 단순한 오류만 기록함 -> 로그인실패허용횟수의 초과와 신고기능은 관리자에게 쪽지로 보고함)

4. 아이콘, 기본디자인 통일성 부족

5. 고정된 관리자페이지 폭 -> 16:9의 넓은 해상도에서 불편함.

6. 웹 접근성 취약 (단순히 문법검사에만 적잡하도록 설계됨)

7. 텍스트로 된 불편한 도움말과 스프링노트의 매뉴얼과의 미 연동

8. 기타 관리자들이 느끼는 여러가지 문제점들

Page 21: Gr board ui 개선 프로젝트
Page 22: Gr board ui 개선 프로젝트

직접 느낀 여러가지 문제점들과 그동안 SIRINI.NET에 보고된 제안, 불편한점들을 목록화 하여 정리

+ 다른 프로그램들 벤치마킹

직접 기술적으로 해결 가능한 문제

별도의 팀원들의 도움이 필요하거나 기술적으로

구현이 어려운 문제

보류하거나 도움을 요청 혹은 제외

계획한 틀에 맞춰 반영

Page 23: Gr board ui 개선 프로젝트

SIRINI.NET (GR BOARD 공식사이트)를 통한 문제점/제안 수집

Page 24: Gr board ui 개선 프로젝트

관리자페이지, 관리자페이지와 비슷한 모든 웹디자인/페이지 를 수집한 후 분석

Page 25: Gr board ui 개선 프로젝트

수집한 정보들을 바탕으로 아이디어 스케치 작성

Page 26: Gr board ui 개선 프로젝트

여러가지 시안 제작 + 수정

Page 27: Gr board ui 개선 프로젝트

일부 확정된 내용들 HTML/CSS 코딩

Page 28: Gr board ui 개선 프로젝트

서버 스크립트언어 (PHP) + Mysql 을 이용하여 프로그램 기능 구현

적용 및 테스트

배포

Page 29: Gr board ui 개선 프로젝트
Page 30: Gr board ui 개선 프로젝트

다국어 지원과, 3단계의 설치유형 제공

GR BOARD 유입자 특성을 파악하여 많이 쓰이는 타 프로그램의 데이터 컨버터 프로그램을 내장.

탑재되어있지 않는 프로그램은 플러그인식으로 간단히 추가 가능 어려운 복구/이전 과정대신, 설치페이지에서 쉽게 복구/이전 가능함. 불필요한 자원낭비를 위해, 설치 후 관리자페이지에서 기능제거 가능

Page 31: Gr board ui 개선 프로젝트

유형을 선택하면 페이지 이동 없이 동의창이 나타나므로 스크롤문제와 페이지 이동과정이 필요없음. + 자바스크립트를 지원하지 않는 환경에서도 접근가능.

00 GPL 라이선스와 GR BOARD에 사용된 프로그램의 저작권 확인 가능

Page 32: Gr board ui 개선 프로젝트

기존의 관리자 계정생성시에 기본테마 가입창에서 별도로 진행하던 것과 달리 UI를 통합하여 제공

00

설치과정과 전보다 명확한 진행단계 표시

Page 33: Gr board ui 개선 프로젝트

기본 버튼디자인

기본 버튼디자인을 제공, 상황에 따른 버튼디자인으로 별도의 디자인필요 없이 의도하고자 한 기능 구현 가능. 버튼디자인 제시로, 개발시 통일성 유지 가능.

Page 34: Gr board ui 개선 프로젝트
Page 35: Gr board ui 개선 프로젝트

사이트 이름과 주소를 한번에 확인가능 -> GR BOARD를 이용하여 여러사이트를 운영하는 사람에게 혼란성 최소화시킴

다중 관리자 염두 + 클릭시 이전 접속 IP주소와 시간 확인가능

메뉴의 단순화 + 통폐합 깔끔한 픽토그램 사용으로 직관적인 UI 구현

기존의 복잡한 현재화면을 대폭 축소/정리하여 가장 사용이 많은 필요한 정보들만 제공 -> 추후 사용자가 편집가능하게 할 예정

각 메뉴에 도움말 아이콘 배치 클릭시 스프링노트 매뉴얼로 이동 -> 최신업데이트에 따른 빨리 반영된 매뉴얼 제공 가능

Page 36: Gr board ui 개선 프로젝트

모든 정보들을 한곳에서 편리하게 보고 관리하자!

페이스북 알림창에서 벤치마킹. 기존의 관리정보/오류/알림들을 모두 ★에서 다룸으로서, 여러단계를 거치지 않고 한번에 확인가능함. 쪽지(메모)에 별도의 필드를 추가/관리자를 구분하여 구현예정. 톱늬바퀴 아이콘과 도움말 아이콘을 통해 관리자페이지 메뉴의 배치와 색상(밤/오전모드)설정 제공, SIRINI.NET 혹은 사용자메뉴얼에 쉽게 접근 가능.

Page 37: Gr board ui 개선 프로젝트

기타 아직 구현되지 않은 기능들과

추가적으로 사용자들이 제기한 문제점 수정/반영

Page 38: Gr board ui 개선 프로젝트
Page 39: Gr board ui 개선 프로젝트

UX, UI 디자인의 향상

웹 접근성, 사용자 만족도 향상

여러 최적화 기법들로 인한 속도 향상

통합된 디자인으로 통일서 유지

더 쉬운 사용환경 제공

기타 추가로 발생할 여러가지 이점들…