운용 담당자(Windows에서 주로 일하는 사람)는

개시하다

これは、私が実際に業務で体験した、UIへの指摘事項の話です。

私は数年間、社内ポータルの開発に携わってきました。
これまで学んできた UI のお作法に則って開発をしてきましたが、
まさか、そこに様々な指摘事項を貰うことになるとは
思いもよりませんでした。

今回はそのうち、運用担当の方、
特に Windows をよく使う方々から頂いたお便り（指摘）を紹介します。

※個人情報、および業務上の情報は伏せています

기타 지적사항(담당자 지적 등을 활용)은 아래 페이지에서 이동할 수 있다.

실제 UI에 대한 지적 사항(홈페이지)

Windows 선택

초기 상태

여러 줄 데이터를 목록으로 표시하는 UI가 만들어졌습니다.
초기 요구 사항으로 여러 줄을 선택하여 삭제하거나 다운로드하시기 바랍니다
이러한 의견이 있으므로 확인란을 선택할 수 있습니다.

지적하다

운용 담당자인 A씨는 이 점을 지적했다.
삭제하고 싶은 데이터가 여러 번 있다면
여러 번 복선상자를 누르는 것은 매우 번거롭다.
한번 해봤는데 정말 귀찮아요.
Windows처럼
Ctrl과 Shift를 누르면 여러 개를 선택할 수 없습니까?이런 거.
그럴 생각 없음;

대응

확인란 취소
Ctrl 및 Shift는 Windows처럼 여러 행을 선택할 수 있습니다.
구체적으로 다음과 같은 대응을 했다.

Ctrl을 누른 상태에서 이전의 선택 줄을 유지하는 동시에 새로 클릭한 줄도 선택 상태가 됩니다

Shift를 누른 상태에서 지난번에 클릭한 줄과 다음에 클릭한 줄 사이의 모든 줄이 선택 상태가 됩니다.

※ 구글 드라이브 접근

메아리

A씨로부터 "A씨보다 직관적이고 쓰기 좋다"는 답변을 받았다.
그 밖에 A 씨는 본래 운용 경험이 없었다
Windows 폴더 작업은 자연스럽게 수행됩니다.

교훈.

Windows와 같은 의견이 많았으면 합니다.
다 받아들일 필요는 없지만.
나는 그 화면을 조작한 사람의 경험에 따라 대응하는 관점을 취할 필요가 있다고 생각한다.

클릭하여 복사 붙여넣기 3회

초기 상태

고장 조사용 검색 화면을 만들었다.
검색 결과를 복제해서 사용하는 경우가 있다고 합니다.
CSV 형식으로 다운로드할 수 있습니다.

지적하다

운용을 맡은 B씨로부터 의견을 얻었다.
화면에서 세 번 클릭하여 검색 결과를 통일적으로 선택하고 싶습니다.
CSV 다운로드 안 돼요?이렇게 물어보면...
작은 항목 복사하기
서류를 하나하나 현지에 버리는 것은 매우 번거롭다.
그러면 마우스로 선택하고 복사합니다
그렇게 말하고 싶었지만 말하면 질 것 같아서 고민하기로 했어요.
제안
일반적인 클립보드로 복사 단추가 있습니까?
대답하다.
복사 단추는 직관적이지 않습니다.
어쨌든 복제에 대한 반대 의견을 누르고 싶습니다.
또한 비교적 긴 검색 결과를 표 형식으로 가로로 표시하기 때문에
버튼을 배치하면 가로로 길어지면 더 잘 보이지 않는다는 지적이 나온다.

대응

자주 복제되는 항목만 세 번 클릭하면 모두 복제할 수 있다.
목록이 표 형식이면 문자열의 마지막 공백이 있을 수 있기 때문에 trim도 진행됩니다.
※ trim: 시작, 끝 등 여분의 공백이나 줄 바꿈 작업 제거

메아리

B씨로부터 이런 의견을 얻었다. 복제를 클릭하면 역시 편하다는 것이다.
나는 마우스를 별로 쓰지 않아서 눈치채지 못했다.

교훈.

복제를 클릭하라는 요구는 아직도 뿌리가 깊다.
또한 다운로드와 복사 버튼만 있으면 충분하다는 생각도 꼭 옳은 것은 아니다
UI는 작업자의 관점에서 작업하고 제작하는 것이 중요합니다.

입력 표시줄이 너무 작습니다.

초기 상태

검색용 입력 표시줄을 만들었다.
전자 우편 주소 등이 있는 항목에서 화면의 레이아웃을 맞추기 위해
크기는 약 8 자의 한자 크기이다.

지적하다

운용 담당자인 C씨는 이 점을 지적했다.
검색할 때 때때로 긴 메일 주소를 입력합니다
입력란이 너무 좁아서 무엇을 붙였는지 모르겠다.
듣건대
작업 중 검색 문자를 입력 표시줄로 복사
검색을 실행하기 전에 입력할 수 있는지 눈대중으로 확인하세요.
따라서 입력 항목란이 너무 작으면 확인하기가 번거롭다.

대응

입력한 문자열 크기에 따라
입력 표시줄이 자동으로 확대되고 축소됩니다.
복사하여 입력한 것을 붙여넣을 때도 마찬가지다.

메아리

C씨로부터 복사·붙여넣을 때 문자열 확인이 수월해졌다는 의견을 받았다.

교훈.

입력란을 제작할 때 화면 레이아웃에 지나치게 국한되다
입력 표시줄 자체의 크기는 거의 고려한 적이 없다.
그러나 검색자도 입력 후 확인하는 경우가 있다
입력 표시줄의 크기는 입력한 크기에 따라 변경하거나 자동으로 변경할 수 있습니다.

이전에 조작한 줄은 어디에 있습니까?

초기 상태

데이터베이스 내용을 열거할 페이지를 만들었습니다.
각 줄에는 편집 단추가 있어 모드에서 열린 편집 화면에서 내용을 변경할 수 있다.
※ 모드: 웹 페이지에서 팝업하는 작은 창

지적하다

운용 담당자인 D씨로부터 상담을 받았다.
편집이 끝난 후, 나는 목록의 어느 줄까지 일했는지 잊어버렸다.
무슨 방법이 있습니까?이런 의견.
물어보면
목록에서 순서대로 처리한 것 같은데, 절차 작업이니까.
방금 편집한 내용이 기억이 안 나요.
그리고 비슷한 내용의 줄이 많아 더 이해하기 어렵다.
제안
줄을 서다.
하지만 문패를 기억하지 못한다는 지적이 나온다.
말하자면 새로운 아이템을 추가하면 순서가 엇갈리기 때문에 미묘하다.

대응

편집 화면(모드)을 열면 행 전체의 색상이 빨간색으로 바뀝니다.
※ 색상은 일반 배경과 어울리지 않으면 무엇이든

메아리

D 씨가 전에 편집한 줄의 색깔이 바뀌었어요.
나는 당신의 의견을 받았는데, 나는 이미 현재의 업무 위치를 알고 있다고 합니다.

교훈.

데이터의 양이 많고 흐름 작업에서 편집된 페이지에서
편집 작업의 행이 활성 상태인 경우(배경색 변경 등)
유동 작업이 끊기지 않아 효율적이다.
나는 편집 화면이 모드든 페이지 이동이든 모두 같다고 생각한다.

정렬할 항목 없음

초기 상태

Bootstrap의 DataTables 기능 활용
데이터를 나열할 페이지를 만들었습니다.
각 항목을 정렬하고 정렬 항목에 화살표를 추가하는 기능이 있습니다.

지적하다

운용 담당자 E씨는 이 점을 지적했다.
정렬 버튼이 너무 작아서 어떤 항목에 따라 정렬되었는지 알기 어렵다.
또한 정렬된 객체의 항목 컨텐트가 긴 경우
열 머리글(정렬 시 화살표 표시) 폭 변경
화살표가 어떤 항목을 가리키는지 분별하기 어려워졌다.
수정 전 UI

주제별로 재배열됐지만, 재배열된 화살표(▶)가 옆집 고장 내용에 가까워 어디서 재배열되었는지 분간하기 어려웠다

대응

Bootstrap의 Datables에서는 기본적으로 테이블의 세로줄이 나타나지 않습니다.
그래서 일부러 이걸 표시하기로 했어요.
※ 제목 줄만 지원합니다.표 자체에 문제가 없기 때문에 칸막이를 하지 않는다
이로써 화살표가 존재하는 항목을 알 수 있다.
또한 정렬된 열 헤더에 색을 추가합니다.
수정된 UI

주제로 다시 배열된 걸 한눈에 알았다

메아리

E 씨는 세로줄과 머리의 색깔에 따라
나는 정렬된 항목이 잘못 보지 않을 것이라는 의견을 받았다.
또한 E씨는 평소에 전자 표(Excel) 편집에 익숙하다
아마도 격자가 없는 표는 위화감이 있을 것이다.

교훈.

JS의 외부 라이브러리에는 테이블 격자선이 없는 레이아웃이 있습니다.
그러나 전자 표 표시에 익숙해진 사람에게는
경계를 분별하기 어려워 똑똑히 보기 어렵다.
선택한 열에 색상 추가 등
만약 전자 표의 표준에 따라 디자인한다면 많은 사람들이 매우 기뻐할 것이다.
이전 "Windows와 마찬가지"
"Excel과 같은 작업을 하고 싶다"는 의견도 자주 받는다.
그러나 이 부근은 사용자의 취향에 따라 다르다
주로 사용하는 분들을 위한 청력,
모크에서 확인해서 최고의 UI를 만드는 게 좋아요.

※本記事に登場する人物やサービスは仮名です。