October 19, 2016
Design and documentation posted for:
- Forms: Errors and Validation
- Forms: Expand/Collapse Section
- Form Field Layouts
- Forms: Progressive Disclosure
Angular and Core code posted for:
Design and documentation posted for:
Angular and Core code posted for:
Base on the document of Terminology and Wording
PatternFly encourages users to adopt much more emotional descriptions to show the time and date in the application. In most cases when users created a blog or document, their activities like attached / updated / followed / commented / liked / unliked…, we can use the following ways to display time:
In some environments, your application may need to show a correct time information, like a meeting time or a event time… Here are some recommended examples to show the correct time.
More information about Date Formats, please check Terminology and Wording of PatternFly
Please feel free to leave your comments and suggestions. Thank you~
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 variety of layouts that can be used to organize your content for users to complete in a meaningful manner.
However, in the case of multi column forms, it’s mostly best practice to avoid their use. The main problem is that using multiple columns within forms could cause the potential for users to interpret the fields inconsistently. Below are 5 examples of ways multi column forms could be interpreted.
As you can see, multiple columns interrupt the vertical impulse to move down the form. Rather than forcing the users to visually reorient themselves, it’s best to keep them in a consistent flow by sticking to a single column layout.
However, there are a couple exceptions that seem to be acceptable.
The main exception for using multi-column forms that cause the least amount of confusion were for short fields as well as logically related fields. The most common example are name and address fields (City, State, and Zip Code).
This type of content is standard and easy for users to follow. One suggestion for this format is to align the labels above the fields, rather than to the left. The thought was that this makes the grid stronger and thus, easier to map the fields visually. Do you agree or disagree? This could be something we could explore for this pattern if we decide to move forward with it. In this case the labels are kept to the left to stay consistent with our general form design.
Another variation is instead of a standard two level format, use various columns. Keep in mind that this will works best for related short input fields.
The second exception is when there are to different form choices. User must choose to fill out one or the other. In this case, when the forms fields are shown next to each other in a multi column format, there is little confusion as long as the distinction of the two form choices are clear.
There were several thoughts on this use case. First being that this would be considered two single column forms next to each other, rather than a multi column form. The second being that instead of this format, opt for a preselection for new or returning users. This would then display a single form rather that two side by side.
Because this is the beginning stages of the development of this pattern, we would love to hear your thoughts and input on this topic. Are there any other scenarios that are acceptable? Do you agree with the conclusion and the comments received thus far?
Please comment below with your thoughts as they could help shape this pattern as it moves forward along the design process.
If you’ve been following the Patternfly mailing list or happened to stumble on our recent post on developers.redhat.com, “Are Web Components in the future for Patternfly?”, you’ve probably noticed that we’re doing some thorough research on web components right now.
I’d like to take this opportunity to provide a few updates on our findings and share some context on our recent discussions around web components in Patternfly.
Custom Elements, HTML Imports, Shadow DOM, and HTML Templates are the new specifications heavily influencing web components (you can read a great introduction here if you’re new to these topics), but it’s important to remember that these are mutually independent. Although many examples combine Custom Elements with Shadow DOM CSS techniques, they are not required to be used in conjunction (another trait which adds to their versatility). Custom Elements can stand alone and be styled just like other HTML.
Due to Shadow DOM’s currently minimal browser support, it would not be a stretch to consider a gradual adaptation to implementing new web component standards like the following:
As browser support improves, Shadow DOM can be adopted to improve our CSS encapsulation where necessary. It should also be noted that while HTML Imports may be the most common way to consume web components, Custom Elements can be defined and included as ES6 classes. This alleviates another web component standard and gives options with this specification as well.
Building on our past breakaway sprint efforts with web components, we’ve extended our <pf-tabs> element and tested our approach with some popular new web frameworks gaining traction at Red Hat: ReactJS and Angular2. Utilizing components as “leaf nodes” within other framework components makes them essentially comparable to other DOM nodes used, only much more flexible.
The goal of this research was to integrate a custom element in these frameworks alongside our Patternfly implementations and explore any roadblocks or challenges discovered.
You can see our current work on the <pf-tabs> component here.
(pf-tabs component rendered individually)
A few things to note about this component:
There are too many details to cover in this post, however I encourage you to explore the aforementioned demonstrations. If you run these demos, you will easily notice that our tabs component works as intended in both frameworks and the new frameworks provide adequate contexts to create a Patternfly application.
(Tabs component rendered in a Patternfly/React app)
I should add that our discussions on these frameworks have been fruitful (luckily, there is already an abundance of materials for each to aid in our research). Both frameworks provide exceptional solutions for common problems app developers face like data binding, observing state and inter-component communication, custom events, and optimal rendering. Particularly important, we haven’t found web components causing any barriers in this regard and observed the patterns implemented in these solutions translate quite nicely to web components.
We’ve prepared plenty more to share on this in future posts and will be fine-tuning our strategy in coming weeks. We’ll also be exploring other topics like performance, server rendering, and modular design. So stay tuned to our blog and mailing list all you Patternfliers!
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 given selection?
When we designing a web form, we should always keep the form easy and simple. We could hide the unnecessary fields in order let users focusing on the present job and show them out when needed.
The picture below is a comparison of the old Apple ID register page and the new one. The difference between the old one and new one is that they remove the mailing address input. Most of the users will register the ID only for downloading the applications or set up a new device. Moving the mailing address part to the buying page and hiding it in the current page will make the workflow more smoothly.
Old Apple ID register page New Apple ID register page
Back to the question, we could use the progressive disclosure if there are more fields based on a given selection.
We would not rather choose to show the fields that user can’t be interacted with.
In this case, user will spend unnecessary time to identify what fields they can be interacted with and what they can’t.
We would rather not keep all fields there and gray them out.
The color of Patternfly unclickable field is very light. They can not be seen very clearly on the Linux and Microsoft devices (those devices do not have Retina screen).
The Wireframe link is here
This is to define the single level conditional fields.
1.I change the input name from the left to the top in order to help user viewing the form more easier.
In web form design, it is better to use “F” sight line rather than “Z” sight line
2.The unchecked field will not be shown unless user clicks it. After clicking the checkbox, the text field will show. The design is to help user focusing only on the present workflow, to avoid him from losing the way. When clicking the first selection checkbox, the text field will all hide.
This is to define the multi level conditional fields.
1.Add a cutting line to distinguish the first level fields and subfields.
2.Unchecked fields will open only until user clicks it. When clicking the sub level checkbox, the text fields will show.
This is to define the conditional fields with dropdown menu.
1.Despite of the first selection fields, the other none selected dropdown menu will hide until user clicks it.
2.When clicking another checkbox, the previous none selected dropdown menu will hide.
Thoughts, comments, concerns? Feel free to comment on this post.
We need a responsive design for tabs to handle overflow, which will include a responsive state for the two levels of tabs as well.
Current tabs implementation
However, When there are many tabs, it requires significant scrolling to find one of the tabs. Also, it’s not recommended in Material Design guidelines to present tags as a single column
You can also view this Angular Material demo
2.Responsive Secondary Tabs
Current secondary tabs
It might be better for mobile use cases to scroll horizontal versus displaying all the options. Here are some suggestions to address the problem. ->>
Demo is based on AngularJS ->> http://codepen.io/fishfish/pen/vKbzAw
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.
The alternative to indicating required fields is indicating optional fields. This is commonly indicated by explicitly writing out (optional) for every optional field. Like the asterisk, the (optional) marker has also been around forever as a pattern in web forms; it is similarly ubiquitous.
The arguments for marking only optional fields with (optional) are that:
So, with that in mind, here’s the design proposal for Required Form Fields in PatternFly:
Our recommendation is to mark only optional fields, using the word “optional” (see Design A1 below for how this looks). If a majority of the fields are optional, then you may mark required fields instead (Design B1), but just be aware that if you use both approaches across different forms, it makes for inconsistency in your designs.
If all fields are required, this can be indicated implicitly by disabling the Primary (Submit) action until all fields are filled out (Design A2).
Conversely, if all fields are optional, you have the choice to remove the optional markers, and indicate the fact that the fields are optional implicitly by always enabling the Primary (Submit) action (Design A3).
Mark only optional fields. Use this approach by default.
When all fields are required, indicate this implicitly by disabling the Primary (submit) button.
When all fields are optional, you may drop the optional markers and indicate optionality implicitly by always enabling the Primary (submit) button.
Mark required fields. You may use this approach when a majority of the form fields are optional.
Thoughts, comments, concerns? You have the option to comment on this post.
As a user experience researcher supporting the PatternFly project, I’m currently researching and developing personas that represent the typical PatternFly user or contributor. Personas are fictional, often alliteratively named, representations of your users. They are based on similarities gleaned from quantitative and qualitative research on users’ habits, motivations, and work contexts.
While I will do more in-depth research by interviewing users in the very near future, I wanted to have an initial draft of the personas available to get a sense of whether actual users see themselves in the descriptions. Digging around in various sources of information about users and roles, I found enough insights to kick off an initial draft. The sources I started with include:
Looking through all this information from dozens of actual users shook out three, possibly four, similar roles: front-end developer, a back-end developer who needs to do front-end development, and a designer (which may need to be broken out into interaction designer and visual designer). Personas can include any kind of information, from what kind of laptop they use to what kind of pet they have, but they work best when you focus on areas that help you understand the problem you are solving for that type of user. For each PatternFly persona, I noted points in these categories: background/tools, goals (motivations), pain points, “a day in the life.”
Organization of the persona information
Once the first draft was solid, I ran it by a few teammates to make sure these were heading down the right path. Through these discussions, it became obvious that the idea of “open source contributor” was important to include, but isn’t so much a persona as much as it is a role that each of these personas takes on at various points. Each persona has times when they are consumers of PatternFly (reading content, downloading examples) and times when they are contributors (participating in the mailing list, writing patterns, submitting code), and their actions and motivations in each case would be very different. To date, searches for persona-like research done on open source contributors have proven less than fruitful.
And that, my friends, is where we are today. I invite you to peruse the draft and think on your own PatternFly experiences and those of people you have collaborated with. As you do, ponder these questions as well:
So, do you see yourself in these personas? Let me know your thoughts in the comments.
Edited to add a link to the ODP version of the personas. If you use the file to write your own personas, let us know — we’d love to see what you create.
There are many things the Forms Pattern does not specify today. During the discovery phase, we captured requirements (see list below) from various stakeholder projects. One of the top requirements was for a feature to “Hide/Expand Advanced Options” in the form.
With the collection of discovery work screenshots and some other popular option about “Hide/Expand Advanced Options”. I created four demos to do some Usability testing.
The test mockup link: https://invis.io/EY87CTCF9#/179595570_Demo1-1 (Please try the mockup and leave your comments in Invison demo freely.)
Shows the “Advanced Options” button with a blue link color which helps the user to focus on it and know it can be click;The “arrow” icon indicates to the user that it can expand.
The arrow icon changes when with user clicks
The divider line appears on expand to divide the two different options
“+” indicated that there is more information;
Click the “+” icon to expand and the “-” icon to collapse
Use word “Show” and “Hide” to show Advanced Options
Similar with the demos before, put the advanced options button in the middle of the form.
Which demo feels better to do the “Hide/Expand Advanced Options” ?
If you have any other good suggestion, feel free to leave comments in the blog. Thank you~