New Date-Time-Picker

[johannesmutter]

Hey!

I made some UX improvements to the edit appointment post page.

1. I moved the "post-create-date" to the save box, as all WordPress post types have it there and it caused confusion with the appointment start and end date.

2. I replaced the select input for customer status with a button checkbox group. Saves 1 click and the order is more obvios (1. expected → 2. arrived / no-show)

3. I replaced the ugly jquery-date-picker with a modern cross-browser compatible one, that has build-in language support, validation and most importantly a time-picker (jQuery-DateTimePicker on GitHub / Documentation )

Already pushed it to the repo

———

Screenshots

[johannesmutter]

What we might address next on the edit appointments page:

• Desaturate unavailable dates for selected provider in date-picker dialog (less visible, but still selectable).
• Don’t let users choose an "end time" before “start time” if start_date and end_date are equal.
• Improve the layout for "Appointment Details" for small screens
• Display scheduled product and provider in separate fields or at least display the product name and provider at the same time.
• Optimize Customer Details Dialog: Remove duplicates (Name / Email)

[Željan Topić]

Looks fine, but it creates too much friction and complexity with added library that is not part of WordPress or WooCommerce. Experience must be consistent. I'll review the code and see what might work.

[Željan Topić]

Some of it is implemented with version 1.9.8, other stuff has been left out due to inconsistency with WooCommerce experience.

[johannesmutter]

Please let me explain why from a user point of view this is a false decision.There are a well founded reasons why I made these changes.

I showed the two version 14 members of our staff, this is what I learned while silently observing their actions via remote desktop:

1. Entering a time for start_time & end_time is almost impossible on a desktop touchscreen device. They will need to use the keyboard. But using a keyboard compared to clicking on a dropdown list and entering the time manually is a common source of errors. Also it takes way longer to enter a time manually compared to click & select (because they have to switch input devices: touchscreen/mouse → keyboard. Any unnecessary switch between input devices should be impeded).

2. The jQuery Datepicker doesn’t allow the users to choose a year, nor does it allow the user to choose a month effectively. Instead users have to make e.g. 8 clicks to choose a date 6 months in the future, compared to 3.

3. The “Today" Button is located at the bottom of the dialog, meaning a longer distance for the cursor to travel.

4. There is no need for a close button. From A/B Testing I learned users know clicking somewhere else does the same and is faster, than aiming for the small button.

5. The jQuery Calendar doesn’t show the days from last & next month. Which is an inconsistency in experience as your appointments calendar for adding an appointment does display this days greyed out.

6. Another inconsistency is in appearance: While every single UI element in WordPress, WooCommerce and your plugin uses flat design without gradients, the jQuery Datepicker still has the shiny gloss buttons. Also the font-weight, style and family is different. It really feels like an alien element. The colour of the selected day and the hover effects are also different compared to WooCommerce & WordPress style guide.

7. Changing the customer status takes 1 click more and a few milli seconds longer to find the entry the users wants to set. There is a rule in UI Design to provide a switch rather than a drop down list for elements with less than 3 choices and short labels provided. Which I think is given here. Also the visual order (left to right || timeline) helps users to understand the meaning. In a list the order seems to be random.

8. Save: Every WordPress Post shows the author of that post (Created by … on …). For shop managers it is important to know by whom the appointment was created. If there are questions regarding the appointment he otherwise has to ask every shop staff who created this appointment.

9. Inside of the edit appointment window it is not clear whether this appointment was created manually by staff (e.g. a phone booking) or if it is a booking made by a customer (web).

10. All Day: Labels for checkboxes should be left aligned not top aligned for a better readability and more efficient use of space. Users will need to understand the meaning of this checkbox only once, so the label should be placed inside a WooCommerce ToolTip. Adding too much text to the screen makes it appear complex and decreases the usability.

11. The same applies to the other labels: When editing the appointment it is clear to the user by the main title and by the provided fields that this is an appointment. The interface alone should tell the user what he is about to do, not some labels. Therefor repeating the label "appointment" should be avoided. E.g. looking for the label "Date/ Time" takes longer if there is the prefix "Appointment".

New labels and grouping should be:

• Appointment (All Day; From/ to date + hour; Scheduled Product & Provider. Visible at once: currently it says e.g.: scheduled product: “James Michael”, which is kind of offensive, as a staff member is labeled as a product; …). I think it’s better to display the “From” – “To” in a single line (metaphor of a time line) and the datepicker dialog won't block the other date/time input field anymore. So top row full width: Appointment; followed by the two columns for order/ general details and customer. Appointment ID should be a search & select box. Number of customers can be smaller (left aligned labels would save some space).

• Customer (together with customer name; view customer; change customer; customer status; customer details→address/phone/email) – Empty customers fields (Email / Phone) shouldn’t be displayed. Email & Phone are recognized by their format to be email/ phone, so they don’t require a label. If there is more than one email/phone (e.g. billing email) than add a label, otherwise not. Add a bit of AI and search the customer meta fields for terms like phone/mobile/email than check with RegEx if these fields are really the ones expected. As many other plugins like ACF/CRM/Gravitiy Forms add such fields to the customer, this would be very valuable for the user to display them, without the need of an integration to be developed (saving time & money).

• Order (Order ID; View Order)

I know, my draft is far from perfect, but the current solution is unfortunately very unpleasant to use and time consuming. Concerning the use of third party libraries I don’t understand the concerns. There is not a single plugin I have installed that doesn’t come with a bunch of libraries that enhance UX. End users care less about 2-3 scripts loaded more than a difficult to use interface.

I hope you appreciate the effort I’m investing in improving the usability of your plugin.

I have attached a view screenshots of easy to use “add/ edit appointment dialogs”.

This one is I think a brilliant idea in apple calendar: Show the duration behind the end time.

[Željan Topić]

By third-party library, I was referring to jQuery DateTime library you included. I understand your concern here, but if this plugin goes away from current state of WordPress and WooCommerce, it breaks consistency. I hate the datepicker from jQuery and I'm not using it because it is the best solution, but because it is currently a standard across WordPress and WooCommerce. I'm willing to sacrifice this for HTML5 datetime inputs, but it's not universal yet, so I'll wait for this to mature and include it thereafter. If you know of any stable polyfills that provide consistent fallback, let me know and we can test that, but I'm not going to jQuery Datetime library, which is way too large and unnecessary here. Currently, the only external library Appointments plugin uses is Select2 4.0.3 and I'll will shortly remove that as well, since WooCommerce plans to include the updated library in next release.

1 -6 All WooCommerce and WordPress pages use datepickers from jQuery, so even if it's not the best, it should work well.

7 I understand that your solution looks better and works better but it is inconsistent with current select boxes and implies customer status is more important than appointment status. It would also break down, when customers would add more choices or in languages that translate those choices into larger sentences. Your solution is perfect for Apps and Saas solution, where owner controls everything, but here, so many variables occur, it breaks down very fast.

8 and 9 I left the author out, because I don't see the importance of having the author here. In WordPress posts author is important, but with appointments, customer is important and assigned staff member. When customers create an appointment, authorship is assigned to site admin or assigned staff member (if available), so author doesn't share any importance here - or I'm missing a point?

10 I see you point and agree, but it is inconsistent with current WooCommerce practice for checkbox labels. I want this to work, look and feel like integral part of WooCommerce, which is why so many design sacrifices were made.

11 I agree on the labels and will see how this could be simplified. Appointment text is repeated too many times.

I really appreciate your effort and I hope you understand it's not just about the best UI and UX for the plugin, it's more about best UX overall inside current state of WordPress and WooCommerce. If plugin goes out of this, it becomes very hard to maintain the code and provide the best experience for the customer. Trying to copy self-hosted solutions does sound tempting, but it ignores the current state of WP environment and increases the risk of plugin breaking down when used with other plugins and when next WP update arrives. This is why I used default WP modal dialog for the calendar and many other things you suggested.

I strongly considered every input you have taken and have tested it out. I'm looking forward to any other contribution and am thankful for all your inputs and the effort you've put in.

[Željan Topić]

Also, if you need any clarifications on why something specifically wasn't included, let me know and we'll work it out. It would be easier if you created smaller pull requests, but I can work with core editing as well.

[johannesmutter]

Thanks for the comprehensive reply. I now understand that sustainability within the WordPress/ WooCommerce eco system is more important than temporary improvements to UX. As I’m still diving into the topic I think I’m not fully aware of the development process for WordPress as indeed my background is in SAAS/ Apps.

8/9. Author: In our shop we had several times the issue that some staff made a mistake while adding an appointment by phone. To find out who made this mistake and take appropriate action, the shop manager needs of course to know who created this appointment. But this might be very special, so a filters for the appointments, customer & save meta box would do it.

[johannesmutter]

I changed the frontend.scss a bit to, so it also styles the jQuery Date Picker on Admin Calendar / Edit Appointment page. Users will see the same calendar theme they are used to from add appointment page. Maybe one should move the part where it says “Admin only” to admin.scss. To save 5kb on front-end.

Also I replaced the background image for the UI Elements (arrow left/ right/ background) with WordPress dashicons, so 2 requests less to load and better display on retina devices.

What do you think about these changes?

Yesterday I commited some changes to the admin calendar day view. I think it’s better to display all_day appointments at top. It’s possible now to have more than six all_day appointments (depending on screen size) in calendar while still being able easily see the by_time appointments. Before either a horizontal scroll bar appeared or in staff_view, the items where hidden/ covered by other appointments.

Another change to the design of the calendar I made: Wrap the calendar in an scrollable div, so the header with navigation elements is always visible. As a next step I think it’s better for usability to have the all_day bar and the staff header fixed on top, too.