it-swarm-korea.com

영업 시간 입력 양식

식당이 영업 시간을 입력 해야하는 인터페이스를 설계 중입니다. 하루 동안의 타이밍에 슬라이더 컨트롤을 사용하려고 생각한 다음 사용자가 해당 타임 라인을 적용 할 요일을 선택할 수있게합니다.

문제는 일부 식당은 영업 시간 사이에 몇 시간 동안 문을 닫는다는 것입니다. 이 문제에 대한 우아한 해결책에 대한 아이디어가 있습니까?

** 업데이트 **

이 질문은 그의 주간 뉴스 레터에서 Sacha Greif 에 의해 언급되었으므로 요구 사항을보다 공식적으로 언급해야한다고 생각했습니다.

  • 식당 주인은 영업 시간과 다른 요일 사이의 휴식 시간을 포함하여 영업 시간을 입력 할 수 있어야합니다.
  • 식당이 문을 닫는 날/날짜 이 요구 사항은 트윗에서 나왔습니다. enter image description here
  • 인터페이스는 주로 복잡한 인터페이스에 익숙하지 않은 식당을 대상으로해야합니다.
  • 목표는 식당 주인이 가입하도록 장려하는 것이므로 가입 양식을 작성하는 동안 최소한의 노력이 이상적입니다.

이 질문에 대한 관심과 제안을 환영합니다.

57
Adnan Khan

이는 최종 사용자가 컴퓨터에 익숙하지 않기 때문에 매우 직관적이어야하기 때문에 까다로운 상호 작용입니다. 나는 과거에 그것을 다루어야했기 때문에 그것을 알고있다 :)

11870.com (Yelp와 비슷한 추천 웹 사이트)의 UX 팀에서 일하는 동안 같은 문제가 있었는데, 이것이 우리가 처리하는 방식이며 이상적인 솔루션은 아니지만 잘 작동했으며 식당과 비즈니스에는 아무런 문제가 없었습니다. 그것을 구성 :

사용자는 영업일과 시간 을 선택합니다.

서비스가 분할 된 경우 (레스토랑의 99 %가 2 개로 분할 됨) "분할 서비스"를 클릭하면 두 가지 선택이 더 표시되고 텍스트가 "x에서 x로, AND에서 x로"로 변경되고 링크가 "연속 서비스로"변경됩니다 "사용자는 이전 상태로 돌아갈 수 있습니다.

시간은 30 분입니다. 그리고 기본적으로 가장 일반적인 선택 (09:00 ~ 17:00)

enter image description here

아래에 사용자에게 정보를 보여줍니다. 또한 페이지에 표시되는 방식입니다

까다로운 부분은 다음과 같습니다 ..

거대한 정보 블록으로 변하지 않는 쉽고 이해하기 쉬운 방식으로 표시해야합니다.

그룹화가 핵심이며 동일한 일정으로 요일을 그룹화합니다.

가능한 모든 콤보를 생각해보십시오.

  • 사용자가 매일 모든 시간을 선택하면 중복되는 모든 요일과 시간을 표시하는 대신 "하루 종일 열기"를 표시합니다.
  • 동일한 스케줄에서 연속 2 일 이상을 "그룹화"할 수있는 경우 "mon to wed"를 표시하십시오.
  • 주말 만 선택한 경우 :“주말 : x에서 x로”표시

기타...

힘든 선택을 표시하는 예를 볼 수 있습니다 (공휴일-목요일은 분할 시간 + 금요일, 토요일은 다른 분할 시간 + 일요일로 전체 일정으로 표시됨).

: 13-16 : 30h/20 : 30-0h fri and sat : 13-16 : 30 시간/20 : 30-0 : 30 시간 : 13-16 : 30 시간

여기에서 확인하십시오 : 11870.com의 레스토랑 페이지


방학 시간 및 특별 마감일에 따라 다른 섹션을 만들거나 사용자를 쉽게 혼동 할 것을 권장합니다.

이를 위해서는 상호 작용과 같은 달력이 가장 좋습니다.

일반 휴가 시간과 일을 특별한 휴가 시간과 구별하면 사용자는 다른 것에 영향을 미치지 않는 것을 변경할 수 있습니다.

28
pablo dominguez

나는 그러한 입력을 시각적으로 지원하는 것이 더 좋을 것이라고 생각합니다. 그러면 휴식뿐만 ​​아니라 휴일도 입력 할 수 있습니다. 입력은 다음과 같습니다.

enter image description here

행 또는 셀 머리글 (시간 또는 날짜 포함)을 클릭하면 모든 요일 또는 시간이 켜지거나 꺼집니다. 또한 인기있는 변형을 표 상단에 추가하여 빠르게 선택할 수 있습니다 —"24x7","주말없는 하루 종일"등.

또한 간단한 (휴식없이) 입력에 슬라이더를 사용하는 것은 편리하지 않을 수 있습니다. 일부 사용자 (현대 인터페이스에 익숙하지 않음)에게는 정확한 시간을 선택하기가 어려울 수 있기 때문입니다.

22
Alex Ovtcharenko

사용자가 데이터를 입력하는 가장 좋은 방법은 양식을 사용하는 것이라고 생각합니다. 누구나 사용 방법을 알고 있으며 많은 데이터를 관리하기 쉬운 작은 덩어리로 쉽게 나눌 수 있습니다. 내 해결책은 다음과 같습니다.

enter image description here

이를 통해 필요한 것을 입력 할 수있는 충분한 제어력을 제공하지만 질문에 대한 부담으로 압도하지는 않습니다.

"이 일정은 공휴일에만 적용됩니다"를 클릭하면 공휴일 목록과 함께 더 모호한 휴일에 대한 날짜 선택기와 함께 드롭 다운 메뉴가 나타납니다.

"이 일정은 연중 특정 시간에만 적용됩니다"를 클릭하면 두 개의 날짜 선택기 (예 : [datepicker]에서 [datepicker])가 나타납니다.

EDIT : 방금 갔을 때 요일을 식별하는 것에 대해 조금 봤습니다. 내 솔루션에서 저장 버튼 왼쪽에 "라고 적힌 툴팁을 적어 두었습니다. 힌트 :이 일정으로 닫은 경우 모든 교대조를 제거하십시오. "

14
Conor

WWYD (옐프는 어떻게 할까?)

비슷한 입력 양식을 사용하여 성장하고 성공하는 인기 사이트를 간략하게 조사했습니다. Yelp가 가장 단순하고 직관적 인 솔루션을 가지고 있다고 생각합니다. (직접 시도해보십시오) :

  • 콤보 상자 3 개 (일, 시작 시간, 종료 시간)와 "시간 추가"버튼
  • "시간 추가"를 클릭하면 입력 위젯 위의 시간 목록에 추가됩니다.
  • 각 목록 항목 옆에 제거 링크가 있습니다.
  • 요일 콤보 상자 기본값은 Mon에서 시작하여 새 시간이 추가 될 때마다 자동으로 증가합니다.
  • 다른 시간 콤보 상자에는 적절한 기본값이 제공됩니다.

enter image description here


Google+ 지역 정보 솔루션은 우수합니다. 이 디자인은 실제 사용량 데이터 (직접 시도해보십시오) :

enter image description here


추신.

식당을 등록 할 때 위의 예와 같이 시간을 선택 사항으로 지정합니다. 나중에 식당 소유자가 시간을 추가하도록 부드럽게 자극 할 수 있습니다. 그렇지 않으면 서비스의 다른 사용자가 해당 정보를 기꺼이 추가 할 것입니다.

12
Leftium

식당 관련 웹 사이트와 Sacha의 뉴스 레터 문제로 인해 잠시 동안이 생각이 나에게 다시 떠 올랐습니다. 레스토랑에는 다양한 유형의 영업 시간이있을 수 있으므로 솔루션은 다양한 변형을 포괄 할 수있을만큼 유연해야하지만 기술 전문가가 아닐 수도있는 레스토랑을 위협하지 않을 정도로 간단해야합니다.

enter image description here

직관적이고 컴팩트 한 트위터 bootstrap 확인란 버튼 그룹과 같이 요일을 선택했습니다. ( http://Twitter.github.com/bootstrap/ javascript.html # buttons ) 이미지는 데스크톱 브라우저/클라이언트 용이지만 모바일 인터페이스로 쉽게 변환 될 수 있습니다.

이 인터페이스는 확장 성이 뛰어납니다. 영업 시간이 간단한 대부분의 레스토랑에서는 입력하기가 매우 쉽습니다. 열려있는 요일을 클릭하고 열려있는 시간을 선택하십시오. 매일 별도의 점심 및 저녁 식사 서비스가 있습니까? 문제 없습니다. 타임 슬롯이 다른 시간 행을 더 추가하십시오. 레스토랑 이용자들에게 유용한 정보는 마지막 주문 시점이므로,이 정보도 넣었습니다. 식당이 시간을 입력하면 입력 한 모든 정보가 한 페이지에 멋지게 표시되므로 입력 한 내용을 쉽게 볼 수 있습니다.

이 입력 형식을 사용하면 모든 것이 표준화 된 기계 친화적 형식으로 캡처되므로 출력을 구문 분석하고 읽을 수있는 방식으로 표시 할 수 있습니다 (예 : 월요일-목요일 오전 8시에서 오후 8시, 금요일 휴무).

10
Zach

이 질문은 복잡성을 확산시킬 수있는 무한한 가능성이 있다고 생각합니다. 예를 들어, 식당이 겨울에 줄어든 시간에 문을 열면 어떻게됩니까? 모든 시나리오를 파악하는 데 어려움을 겪을 것이라고 생각합니다.

즉, 사용자가 요청할 때까지 혼란을 줄이기 위해 점진적 공개와 함께 마법사와 같은 양식을 사용하여 상당히 간단한 방법으로 많은 것을 캡처 할 수 있습니다.

1 단계 :

mockup

bmml 소스 다운로드Balsamiq Mockups

2 단계 : (아래 점진적 공개 포함)

mockup

다운로드 bmml 소스

3 단계 :

mockup

다운로드 bmml 소스

9
Alex

(전체 크기 이미지 참조)이 사이트 에서 좋은 예를 찾았습니다. 스포츠 토너먼트에서 스포츠 경기장 가용성을 관리하기위한 것이지만 디자인은 식당의 영업 시간에 쉽게 적용될 수 있습니다. 마지막 두 열은 필요하지 않습니다.

enter image description here

내가 좋아하는 것:

  • 일주일 동안 슬라이더를 드래그하고 시각적으로 쉽게 볼 수 있음
  • 시간 정보가있는 여러 드롭 다운 목록보다 더 빠르고 쉬운 시간 범위 설정
  • 매일 옆에 특정 시작 및 종료 시간을 표시합니다
  • 식당이 매일 문을 여는 총 시간을 표시합니다
  • 슬라이더 핸들을 클릭 한 다음 키보드의 화살표 키를 사용하여 한 번에 5 분씩 슬라이더 핸들을 움직여 세밀한 제어
  • 일정을 지우고 한 번의 클릭으로 다시 시작하는 큰 버튼
  • jQueryUI 슬라이더 로 쉽게 수행 할 수 있습니다.

단점 :

  • 주중에 분할 영업 시간을 허용하지 않습니다. 해당 요일에 분할 영업 시간을 원할 경우 다른 행을 동적으로 추가해야 할 수도 있습니다.
5
zuallauz

몇 가지 아이디어.

1) '분할'시간 허용 :

Hours:
[      ] to [       ] (+ split hours)

그리고 그들이 분할하기로 결정하면 :

Hours:
[      ] to [       ]
[      ] to [       ] (+ split hours)

2) 텍스트 영역으로 자유롭게 작성하십시오.

Enter your hours of operation:
----------------------------
|                          |
|                          |
|                          |
|                          |
----------------------------
5
DA01

다음은 내가 어떻게 생각해야하는지에 대한 모형입니다.

enter image description here

  • 사용자는 두 가지 옵션 중 하나를 먼저 선택합니다
  • 소음을 피하기 위해 호버에 쓰레기가 보이는 것으로 가정하십시오.
  • 기본적으로 사용자는 제목이 1 인 (열기) (보낸 사람) (받는 사람)을받습니다.
  • (보낸 사람) 및 (받는 사람) 드롭 다운은 텍스트 파일 (Google 캘린더)로 작동 할 수도 있습니다.
  • 드롭 다운 대신 각 슬롯에 슬라이더를 사용할 수 있습니다
2
Ali Salem

왜 맥의 캘린더와 비슷한 것이 아닌가?

http://km.support.Apple.com/library/Apple/APPLECARE_ALLGEOS/HT2513/HT2513_01-mac-101-ical_id-001-en.jpg

이것은 시각적으로 매우 명확하지만 클릭 앤 드래그가 가능하여 시간 블록을 빠르게 사용하고 생성 할 수 있습니다.

2
Rich

여기서는 단순성이 핵심입니다. 식당 주인에게 가치를 부여하기 위해, 나는이 제품이 무엇보다 빠르고, 관리 가능하고 직관적이어야한다고 생각합니다.

가입 절차에는 두 단계가 있으며 각 단계는 서로 다른 화면에 표시됩니다. enter image description here

첫 번째 부분은 등록입니다. 그들이 요구하는 것은 이름, 이메일 및 비밀번호뿐입니다. 그런 다음이 정보가 제출되면 다음 화면이 표시됩니다. enter image description here

그들은 생각할 수있는 모든 규칙을 입력하고 각각의 문장을 만듭니다. 알아낼 것이 없습니다. 그들은 다른 사람들과 마찬가지로 단순히 시간을 단락 형식으로 설명 할 수 있습니다. 자연 언어 처리는 모든 문장을 구문 분석하여 요일과 "열기"또는 "닫힌"(다른 트리거 단어 중에서)을 찾아 데이터를 달력에 표시합니다. enter image description here

상단에 캘린더에 추가 할 새 규칙을 추가 할 수 있으며 캘린더의 각 규칙은 클릭하여 편집 할 수있는 텍스트 상자입니다. 달력 맨 아래에는 미래에 대한 메모가 있습니다. 공휴일 또는 예정된 시간 변경과 같은 향후 레스토랑 일정에 적용 할 예정인 알림이 포함되어 있습니다.

그러나 달력은 단순히 현재 주를 보여줍니다. 현재 요일을 강조 표시하고 타임 라인과 같이 식당의 모든 시간 정보를 가로로 표시합니다.

2
zch

enter image description here

며칠 동안 같은 작업을 반복하지 않는 것이 가장 좋습니다. 대부분의 경우, 식당은 영업 시간을 적용 할 일정 범위를 선택합니다 (일반적으로 주중과 주말의 두 가지 범위).

내가 제안하는 인터페이스는 식당 창에 표시되는 영업 시간과 비슷하며 하루 또는 여러 날을 추가 할 수있는 유연성을 제공합니다.

일 범위 내에서 추가 이동을 추가 할 수도 있습니다. 첫 번째 시프트는 삭제할 수 없지만 (적어도 하나의 시프트가 포함되어야하기 때문에) 추가 행에는 옆에 삭제 단추가 있습니다.

상호 작용은 마우스를 사용한 가로 스크롤 또는 키보드의 왼쪽 및 오른쪽 화살표로 이루어집니다 (둘 다 활성화됩니다). 필요한 유연성에 따라 분 단위는 15 분 또는 00 또는 30 일 수 있습니다.

첫 번째 범위 (예 : Mon-Sun) 내에서 모든 요일을 선택하면 추가 요일이 표시되지 않습니다 (그리고 영업 시간에 "매일"을 표시 할 수 있음).

공휴일에 필요한 유연성이 무엇인지는 확실하지 않지만 식당이 휴무일 인 공휴일을 선택하는 기능을 추가했습니다.

인터페이스 또는 상호 작용에 대해 명확하지 않은 경우 언제든지 문의하십시오. :)

2
Haider Al-Mosawi

이것은 어려운 문제입니다. 어려운 UI 문제를 해결할 때 공간을 낭비하지 않으면 서 간단하게 작성하고 간결하고 간결하게 시도하지 않는 것이 좋습니다. 도움이되는 또 다른 방법은 사용자에게 작업 결과를 보여 주므로 사용자가 정보를 입력 할 때 정보를 해석하고 표시하는 방법을 보여주는 출력 섹션이 있습니다.

mockup

bmml 소스 다운로드Balsamiq Mockups

이제이 예제의 입력 섹션 (왼쪽)에 100 % 만족하지 않습니다 (통과 할 수는 있지만 더 나은 제안을 보는 것이 놀라지 않을 것입니다). 여기에서 중요한 것은 입력 결과가 표시된다는 것입니다. 오른쪽의 "출력"섹션에서 실시간으로. 이를 통해 사용자는 탐색하고 실험하고 결과를보고 만족 한 결과에 도달 할 수 있습니다.

1
obelia

Sacha Greif의 뉴스 레터를 읽는 동안 문제에 대해 들었습니다. 가능한 문제 및 해결 방법에 대한 Sacha의 의견을 읽으면서 내 솔루션을 시각화하기 시작했습니다. 나는 그것의 빠른 와이어 프레임을 만들었습니다.

와이어 프레임 예 http://inkreaser.com/ext/stack-exchange/restaurant-hours.png

이 솔루션은 필요한 모든 것을 우아하게 처리 할 수있을만큼 복잡하지만 새로운 사용자에게는 직관적 일 수있을만큼 단순하다고 생각합니다. 기본적으로 양식에는 하루와 한 번의 교대 (최소 요구 사항)가 있습니다. 사용자는 '시작'과 '끝'에 대한 시간과 분을 선택하여 교대를 입력 할 수 있습니다. 이것은 빠르지 만 여전히 완전한 유연성을 유지합니다. 사용자는 '+'시프트 추가 '를 클릭하여 시프트를 추가 할 수 있으며,이 경우'시작 '및'끝 '드롭 다운이 추가됩니다. 사용자는이 시프트 세트가 적용되는 요일을 지정하고 필요에 따라 요일 블록을 추가하여 각 요일 시프트에 대해 프로세스를 반복 할 수 있습니다.

또한 사용자가 오류를 일으켰을 때 '-이 Shift 제거'및 '-오늘 제거'버튼을 포함하고 싶습니다.

1
Ed Williams

나는 식당 주인이나 상점 주인이 일반적으로 영업 시간을 오전 9시에서 오후 10 시로 몇 시간의 휴식 시간으로 본다고 생각합니다. 어쩌면 휴식/낮잠은 현지 일 일 수도 있지만 (키프로스 출신) 매일 두 번의 별도 영업 시간 대신 '휴식'을 추가하면 식당의 관점에서 일을 단순화 할 수 있다고 생각합니다.

내가 생각한 다른 것은 일정을 추가하기위한 탭 인터페이스입니다. 내가 알기로는 대부분의 식당에는 두 가지 주요 운영 시간 일정 (겨울/여름)과 그 외에 두 개의 휴일 일정이 있습니다.

식당은 탭 인터페이스를 통해 일정을 만들 수 있습니다. 일정의 이름을 지정하고 일정의 날짜 범위를 추가하고 각 요일에 대한 영업 시간 및 휴식 시간을 입력 할 수 있습니다 (해당 날짜 범위에 적용됨).

자, 이것으로 생각할 수있는 문제는 겹치는 날짜 중 하나입니다. 예를 들어, 2013 년 1 월 8 일-2013 년 8 월 30 일 범위가 두 개 이상의 일정으로 존재하는 경우 시스템은 어떤 것을 선택합니까?

이것은 일종의 '재정의'설정으로 해결할 수 있지만 (예 : "이 날짜는 Schedule2! 재정의?에 존재합니까?") 이것이 사용의 용이성에 추가되는지 확실하지 않습니다. 또한 추가 합병증을 유발할 수 있습니다 (예 : 재정의 일정이 삭제 될 때 발생하는 상황 등).

1
demrod

나는 시계 위젯을 쐐기로 분리하여 열려있는 시간을 클릭 할 수 있습니다. 선택한 시간은 위젯에서 연한 파란색으로 강조 표시되고 열기/닫힌 시간은 아래 텍스트에 표시됩니다 (텍스트 영역에서도 가능합니다. 또는 클릭이 덜 필요한 것처럼 보이기 때문에 닫히는 시간 만 강조 표시 할 수 있습니다 (아주 밝은 빨간색).

다음은 시간을 선택하지 않은 위젯의 (매우) 거친 Balsamiq 모형입니다.

http://puu.sh/1Tmf3

이미지 예제는 지속적으로 참조 할 수 있도록 스티커 사이드 바에 제공됩니다. 또한 클릭 + 드래그는 여러 시간 웨지를 강조 표시합니다.

0
Duncan Smith

Alex Ovtcharenko의 확장 옵션은 시각적 표시 측면에서 매우 분명하다고 생각합니다. 여분의 사용성을 위해 약간의 조정이 필요합니다. 반 시간 간격을 표시하고 별도의 열 대신 (일부 Mac 캘린더와 같이) 열기 영역 블록을 하나의 영역으로 표시하고 클릭 입력과 드래그 입력을 모두 허용 하여이 작업을 수행합니다. 이것은 다음을 의미합니다.

  • 한 번의 클릭으로 입력 블록을 표시하십시오. 이미 표시된 기간에 해당되는 경우이 블록에 가입하십시오. 그렇지 않은 경우 새 기간을 시작하십시오. 기간이 이미 표시되어 있으면 표시를 해제하고 필요한 경우 영역을 분할하십시오 (예를 들어 점심 시간 표시를 해제하는 것보다 하루 종일 입력 할 수 있음).
  • 영역/기간의 경계를 드래그 할 수 있도록합니다 (적절한 마우스 커서 제공)
  • 클릭 드래그로 영역을 한 번에 선택할 수 있습니다.
0
Inca