Design Standardization : Layout > Empty States

[sdash-redhat]

This story addresses the standardization aspect of Empty States.

Some earlier explorations/pointers to that need to be addressed :

• PF - Should test empty states - Catherine says that in some cases people are clicking the larger icons
• Could the pattern be extended to allow for an icon OR an image?

Verification Criteria

The following activities need to be performed and completed:

• Review the usage across the different existing applications.
• Compare ones from Patternfly.
• Provide the proposal
• Review the Proposal with the team (UX, Engg., PM)
• Draft initial guidelines and engage with the team in the review process.
• Update the content and guidelines to the DSW

Parent Issue / Reference

Design Standardization : Layout #3899 Design Standards Wiki #3799

[AshishDurgude]

Here is the initial research for an empty state for OSIO: https://redhat.invisionapp.com/share/A9LH2EXE2CG#/304437808_4

[sdash-redhat]

Based on the explorations, it looks like the solution to this should address the following aspects of the Empty States [Refer to a quick diagram I made to start with ]

If you have any thoughts regarding any of these aspects please add as a comment below -- That I will take care while in design:

@muruGanesan @catrobson @serenamarie125 @joshuawilson @bdellasc @sunilmalagi [Please feel free to add anyone to this thread whom you think might help]

[sdash-redhat]

Empty State Info types --

Info - is standard information that is expected in the beginning or the first run

Alert - In the scenario of empty space which is the result of beyond the result of something that needs user's specific attention (e.g. in case of no result when some alert level info is shown to the user inline), when a specific message that may appear with an alert icon. This can be applied to the cards that supposed to show some results, but some dependent information requires to be set by the user ..such a scenario is when we might need to show an inline alert to the user ...

Error - if the empty state is the result of some error.

[sdash-redhat]

Here is the initial observation and proposed draft for review by the team to share their thoughts: https://redhat.invisionapp.com/share/UEN434JGF72

Please review and share your feedback. Based on that we will improve it and come up with a VD, that would finally be added to the Wiki

@catrobson @serenamarie125 @muruGanesan @sunilmalagi @AshishDurgude @bdellasc @Essjaysee

[sdash-redhat]

Thanks for the feedback in invision, Have updated with some minor tweaks. https://redhat.invisionapp.com/share/UEN434JGF72#/310256253_Slide01

[catrobson]

Your recommendations look good to me @sdash-redhat! I'd like to see the title capitalization be contributed back into PatternFly 3 specifications. Otherwise I think much of this is ready for our wiki!

[sdash-redhat]

Thanks @catrobson! Will update the wiki with the same in the wiki. We can follow the same approach for the other standardization stories for wiki. To contribute to PF, what is the next step? Should I create an issue in PF repo? Or will that be a different approach?

[catrobson]

To contribute this to PatternFly - create an issue referencing the missing information in the current empty state here to alert people that this is being addressed and you're doing the work: https://github.com/patternfly/patternfly-design/issues

Then start a PR with your improvements to the documentation on this page that will go through review: https://github.com/patternfly/patternfly-design/blob/master/pattern-library/communication/empty-state/design/design.md

Thanks!

[sdash-redhat]

The wiki has been updated with the design refer to the link to the Wiki page here: https://uxd.fabric8.io/layout/empty-state/ Marking as complete.