2009. 12. 9. 17:28
UI or UX
'UI or UX' 카테고리의 다른 글
| [HTML] 뒤로가기에 대한 편의성 제공 (0) | 2009.10.21 |
|---|---|
| checkbox에 대한 짧은 생각 (0) | 2009.09.18 |
'UI or UX'에 해당되는 글 3건
- 2009.12.09 [APPLE] 애플 휴먼 인터페이스 가이드라인
- 2009.10.21 [HTML] 뒤로가기에 대한 편의성 제공
- 2009.09.18 checkbox에 대한 짧은 생각
2009. 10. 21. 15:01
UI or UX
뒤로가기를 통해 자주 호출 될 가능성이 있는 페이지는
GET방식으로 값을 받도록 하는게 좋다.
쉬운 예로
검색기능이 있는 게시판은 list페이지에서 검색을 한 후
view로 들어가 내용을 보고 뒤로 가기를 눌러 다시 list를 호출 할 가능성이 높다.
이때 list페이지의 검색값 받는 방식은 get으로 해야 '만료된 페이지'가 뜨지 않아
이용하는데 불편이 없을 것이다.
'UI or UX' 카테고리의 다른 글
| [APPLE] 애플 휴먼 인터페이스 가이드라인 (0) | 2009.12.09 |
|---|---|
| checkbox에 대한 짧은 생각 (0) | 2009.09.18 |
2009. 9. 18. 17:44
UI or UX
홈페이지에 문의사항 란이 있다.
여기에는 회사, 직책, 성명 등의 입력폼과 질문내용을 적는 텍스트에리어가 있다.
이 곳을 통해 문의자가 질문을 올리면, 관리자는 접수된 문의 사항을 별도의 게시판을 통해서
볼 수 있다.
이런식의 게시판 구성은 참 번번히 사용되는 구성인데
특히 웹메일에서 많이 볼 수 있다.
이렇게 많은 양의 자료를 가지고 삭제처리나 기타 처리를 하려고 한다면 하나씩 반복해서
처리하기가 불편하기 때문에 체크박스가 참 유용하게 쓰인다.
그래서 체크박스까지 한 것까진 좋은데, 그럼 그 다음 또 생각 나는건 이 많은 체크박스
일일이 다 클릭해야 하나...하는 생각일 것이다. 그래서 이번엔 전체선택, 전체해제를
필요로 하게 된다.
여기서부터 나의 고민은 시작됬다.
이 전체선택, 전체해제는 자바스크립트로 하게 될텐데, 문제는 이벤트가 일어나게 하는 인터페이스를
어떻게 구성 할 것인가.. 하는 것이다.
그래서 나는 일단 여러 사이트의 구성을 살펴봤다.
- 네이버 메일과 같은 버튼 혹은 체크박스 단일로 동작 구성
네이버 메일은 전체 선택과 해제를 담당하는 체크박스를 하나 둬서 한 곳에서 전체선택과 전체해제를
하도록 하게 되 있다. 자바스크립트 동작 흐름은 모든 체크박스 중에 하나라도 체크가 안돼 있다면
[전체선택] 버튼으로 , 모두 선택이 되어 있다면 [전체해제] 버튼으로 바뀐다.
그래서 사용자가 체크박스를 몇개 선택하다가 '아~ 나 그냥 전체 체크 해제할래' 하면
우선 전체 선택버튼을 누르게 되서 원치 않는 모든 체크박스 선택을 하게 되고, 그 다음 한번 더 눌러서
전체해제를 하게 된다. 해제를 위해 두번 클릭 하게 된다.
- 전체선택과 전체해제 버튼을 따로 두개두는 구성.
어느 사이트인지 잘 기억이 안나는데 이런식의 구성도 생각해 볼 수 있다.
우선 네이버처럼 단일 버튼으로 구성을 하면 보기 깔끔하고 좋은데, 스크립트 짤때쯤 되면 고민이
많아진다. 위에 예처럼 사용자가 원하는 방식으로 한번에 되게 하기가 힘들기 때문이다.
전체 체크 박스중에 현재 선택돼 있는 체크박스 수를 구해서 체크박스 갯수의 반값보다 많으면 이러쿵
적으면 이러쿵 하는 식이라던지 등등스크립트를 열심히 짜면 어느정도 사용자의 의도에 부합되게
할 수 있을 것도 같은데, 나는 열심히 생각해봐도 사용자의 의도를 정확히 파악하기가 어렵다는
생각이 들었다. 그리고 소스코드도 많이 복잡해져서 보기 힘들었다.
그래서 걍 처음부터 너는 전체선택, 너는 전체해제! 하고 확실히 두개로 갈라놔서 사용자의 의도를
분명하게 받아들이는 방법도 생각해 봤다.
그런데 우선 버튼이 두개 생긴다는 것과, 체크박스에서 버튼까지가 멀어서 보기도 않 좋고
맘에 들질 않았다.
......
그래서 이리저리 생각을 해보다 나는 마우스 버튼을 활용하기로 했다.
마우스 버튼은 왼쪽, 오른쪽 두개지 않은가.
그래서 네이버처럼 이벤트를 받아들이는 부분은 하나로 하되, 왼쪽을 누르면 전체선택.
오른쪽을 누르면 전체해제로 하기로 했다.
마우스 커서가 잘 안보이는데, 이벤트를 받아들이는 부분은 "전체"라고 쓰여진 글씨부분이다.
누를 수 있는 곳이라는 것을 전달하기 위해 cursor:pointer; 를 사용했고, title로 간단한 설명을 해봤다.
근데 title이라는게 어느정도 그 영역에 머물러야 나타나는지라 전달력이 좀 떨어지는 감이 있다.
그래서 따로 레이어를 둬서 이부분도 스크립트로 onmouseover 이벤트 걸려고 하다가 걍 냅두기로 했다.
그리고 마우스 오른쪽 버튼을 누르면 표시되는 메뉴는 숨기고자, "전체"라고 쓰여진 해당 영역에만
oncontextmenu="return false;"를 걸어두었다.
별거 아니긴한데, 게시판이던 뭐던 만들 때마다 어떻게 하면 좀 더 편하게 사용 할 수 있는가 하는 문제로
많이 고민을 한다.
그리고 또 하나 생각이 든게, 웹상에서 이벤트 발생을 시키는 환경을 만들 때, 마우스 왼쪽 버튼에만 너무
의존해서 만드는게 아닌가... 하는 생각이 문득 들었다. 아마도 그건 오른쪽 버튼 메뉴 때문에
그런것이겠지만... 최근 네이버의 N드라이브나 메일을 보면 점점 오른쪽 버튼도 활용하는 추세로
변하는 것 같다.
'UI or UX' 카테고리의 다른 글
| [APPLE] 애플 휴먼 인터페이스 가이드라인 (0) | 2009.12.09 |
|---|---|
| [HTML] 뒤로가기에 대한 편의성 제공 (0) | 2009.10.21 |