Inline Edit on Forms – Conceptual Design

Posted by & filed under Forms, PatternFly.

1. In-Line Edit for Form Inline Edit pattern enables users to edit text directly on the same page instead of navigating them to another page for editing the text. This is useful when the user may want to make a single edit without the need to refresh the entire form to make it editable. This… Read more »

Responsive Form Layout Guidelines – Conceptual

Posted by & filed under Forms.

With so many new mobile phones, tablets and other devices coming out every day, designers have to be prepared to make common functions easy to do on these devices. The usual approach to this is responsive design. The usability of web forms is by no means a new topic. It has been covered in general… Read more »

Advanced Filter

Posted by & filed under Forms, PatternFly.

Description   After researched the quick filter using scenario and the products, Finding out that we could separate the filter function into Quick filter and Advanced filter in order to meet the different needs.  The Quick filter is suitable for commonly used situation.It is fast, simple and obvious. It is used in the common scenario and… Read more »

Quick filter: Improvement for the current filter pattern

Posted by & filed under Forms.

Description   In the previous discussion about the quickly filtering for dataset, we researched the quick filter using scenario and the products (oVirt / CloudForms  / RH Customer Portal / Errata Tool / Openshift), Finding out that we could improve the current filter pattern to meet the requirement.   The quick filter is suitable for… Read more »

Editing Data on Forms

Posted by & filed under Forms, PatternFly.

In designing enterprise applications, we very often encounter situations where the user needs to edit existing information.  In many cases this editing is done in the context of a form where users can make and commit changes.  You may sometime need to apply role-based access to enable editing for authorized users, only.  How should you… Read more »

Entering Numeric Data on Forms – Investigation

Posted by & filed under Forms.

Story Background We currently do not provide any guidance on how to enter numeric data on forms. There is a Bootstrap Touchspin component in Widgets library for numeric data entry but no guidance on how this should be used. There are four ways I founded to entering numeric data. Bootstrap Touchspin (stacked):   Data Input +… Read more »

Exploring Syntax hints

Posted by & filed under Forms.

  The PatternFly team is working to define recommendations for the placement and functionality of syntax hints as they are used in forms. The focus for this user story This user story includes discovery and exploration around recommendations for globally universal field inputs; such as character counts, types of characters allowed, urls, and email addresses,… Read more »

Yay or Nay to Multi Column Forms?

Posted by & filed under Forms.

The PatternFly team is working on the conceptual design for multi column forms. However, this concept is slightly different from other patterns the team has worked on. We are exploring if there is ever a good use case to use multi-column forms, and if so what are they?  Forms are a valuable tool because they offer a… Read more »

Forms:Conditional Hidden Fields Based on First Selection

Posted by & filed under Forms.

Overview This blog is to investigate the web form design especially the conditional hidden fields, and give out the possible solutions. Should we hide fields if user can’t be interacted with? Do we always just keep all fields there and gray them out? Or use progressive disclosure if there are more fields based on a… Read more »

* Required Fields

Posted by & filed under Forms.

The red asterisk ( * ) indicating required fields has been around our digital interfaces so long, it’s one of those things you take for granted, like the anachronistic floppy disk for “save”, or the magnifying glass for “search”. It’s easy to forget that somewhere along the line, it was a choice that someone made…. Read more »