21-Apr-21 Entry: Iterations on ETA Input Field

Derrick Loo 🦎💻🚢 -

I love it when my team challenges my design! Sometimes I may be too attached to my own designs to see how something could be done in another way, or sometimes I don't know if it's feasible coding-wise.

So it's always good that your developers could suggest better ways to design a component.

This was what I've came up with for entering the ETA formats initially: 2 options for user to click to select either enter the ETA datetime or ETA indicators.

Example of ETA Datetime selected.
Example of ETA indicators selected.

So in  order to enter an ETA date with AM, the user needs click the "Indicators" first, key in the ETA date and then select one of the 4 options.

Firstly, the ETA date is repeated in both cases, so there could be a way to use it for both the datetime format or the indicator format.

Secondly, the user needs to toggle between 2 options in order to get to the format they need.

Here's what my dev proposed: one input field for the date, and one input field for the time and the indicators:

Updated date & time input fields.

If the ETA date & time is available, the user can simply key them in as usual.

If its any of the 4 indicators, the user can click on them and the timing input field will be updated:

ETA date with indicators.

Or if it's only ETA date available, the user can leave the timing field empty:

ETA date only format.

If it's an ETA daterange, user just need to select the start and end date from the datepicker, and the timing options will be disabled:

ETA daterange format.

And this is only the prototype designed on paper.

During development, we are able to streamline it further by having the timing input field to behave like a dropdown where you can select to enter timing or any of the indicators.

Here's the scenario where its an ETA daterange: the timing field gets hidden entirely:

If its the same date, then the timing field appears. If the user leaves it empty, then it will be taken as an ETA date only format:

Once the user mouses over the timing field, the dropdown appears:

Dropdown for timing options.

My biggest takeaway is that always talk to your developers during the design phase and be amazed by the solutions they might come up with!