Friday, November 16, 2018

usability testing - Replacing all interaction in a complex UI with a single input field: Do successful implementations exist?


Main questions



  • Can you provide examples of implementations that implement the suggested solution below?

  • If yes, what are the benefits and drawbacks, especially as reported by users?


As the SE guidelines state, please back up any opinions with facts.



Background


I have multiple clients that have existing interfaces that basically are very complex forms. People that don't use these interfaces every day are intimidated by them. These clients are in the process of moving their interfaces to the browser, and we're using that opportunity to rethink the interfaces in general.


Heavily inspired by Google.com, I have suggested the solution below, which basically is a "command line appearing as a friendly search dialog". However, the concept is a big deviation from the existing GUIs. Some clients perceive the risk as too high, even though internal testing with other clients has been very positive, including phrases such as "oh my god, my jaw hit the floor". In order to proceed I therefore need to demonstrate that it has been successfully implemented elsewhere. Hence my request for example implementations.


The end users are lawyers, economists, engineers, clerks etc. that receives software training. However, some of the applications have hundreds of fields, making the applications unnerving for non daily users.


Suggested solution


Also see illustrations below.



  • Make the interface(s) read-only (while supporting selection of text).

  • Introduce a large, friendly-looking, Google-style input field at the top.

  • When populating key-value pairs (a major use case), allow the user to enter the value first.


    • Automatically derive the possible keys based on several factors, including the contents of the value (using regular expressions and dictionaries) and the assumed current use case. Present the keys as autocomplete options.



  • When submitting commands, allow this through the input field as well, employing autocomplete and synonyms.

    • Optional: When a command is selected, transform the input view into a simplified "command wizard", assisting the population of command parameters. Details below.



  • Provide power users the option to make all changes through this box.


    • Provide beginners the option to edit the individual fields directly (e.g. with a pencil icon appearing on rollover) while simultaneously and unobtrusively informing how this action can also be completed by the main input field.




Intended benefits



  • Familiarity: Interface is as similar to Google.com as possible.

  • Improved readability, reduced intimidation: The existing interfaces have up to 70 form elements per template. One of my clients have a corresponding read only view, and the more casual users tend to favor this one. When interviewed, they frankly state that the form-based template is intimidating.

  • More efficient, less strain: User does not have to use the mouse.


  • Focus on content: When entering values, the user oftentimes does not have to specify the attribute.

    • Batch entry: User can paste multiple lines of text into the form at once, and each line/paragraph will be mined for key-value pairs (activates dedicated dialog).



  • Improved registration workflow: Some of the existing templates support multiple registration scenarios. Dedicated registration templates have been considered as too costly in terms of development and maintenance. This interface should solve problems such as tab order for these conflict-of-interest scenarios.

  • Natural language: Using synonyms, users can initiate commands using their personal vocabulary, while being informed about the business' preferred nomenclature.

    • Guided process: The optional "command wizard" supports a dictionary-driven autocomplete, guiding the user when entering parameters. See illustration below. Moreover, the wizard further simplifies batch actions.




  • Embeddable: Like Fantastical's Mini Window, the miniscule input field can be integrated into other products. Outlook would have been a candidate for one of my clients (however, they are unwilling to do any kind of integration with Office due to technical debt).


Simplified use cases


Population of values



  • Use case: User wants to populate the Number plate field with value "DD12345".

  • Solution:

    • Keyboard focus is already in the input field.


    • User types (or pastes) "DD12345".

    • Several "autocomplete" rows, Google-style, appear beneath the input field. The top item is populate Number plate with DD12345.

    • User presses arrow down and Enter, selecting the autocomplete.

    • The value is correctly populated in the read-only view. A highlight appears and fades away.




Submitting commands



  • Use case: User wants to approve a number plate.


  • Solution:

    • Keyboard focus is already in the input field.

    • User types "app".

    • Several "autocomplete" rows, Google-style, appear beneath the input field. The top item is Approve vehicle DD12345.

    • User presses arrow down and Enter, selecting the autocomplete.

    • The system supplies a confirmation in a dedicated feedback field (not a pop-up). The vehicle status is correctly updated in the read-only view. A highlight appears and fades away.





Screen shots


Existing interface – 1st out of dosens of templates, several equally complicated:



enter image description here



Proposed interface – User issues command in the input field (presses p then arrow down):



enter image description here



Proposed interface – When issuing commands, the optional "command wizard" provides help entering parameters:




enter image description here





No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...