Our ideas on how this should look are below, but if you think they're
wrong you are most welcome to submit a completely different design
that fulfills our criteria: it should be powerful yet easy to use,
elegant, compact and it should feel open - not cramped. It should be
extensible to mobile though obviously some of the features e.g.,
“Header Search” are suitable only for larger screens.
Console_UI_Design_New_Draft_Annotated_1.1_20140919.pdf is the main
document which contains our rough sketch and annotations. All the
other documents are shown in the order in which they are mentioned in
the main document. Please read the main document thoroughly first.
Please open it using the latest version of Acrobat Reader. Click the
Comment button on the top right in Reader and if necessary right-click
in the Comments List and click Collapse All. That'll make it easier to
read. Now, in the document pane where the sketch is displayed, go
through each comment from top to bottom. A higher comment is meant to
be read before any comment even slightly lower than it. Otherwise it
might be difficult to understand. Please READ the comments very
The concept of Header Search involves placing slide-out search fields
in the headers of any tabular representation of data. The fields are
hidden initially, but slide out when a fade-in search button on the
header is clicked. The field slides back in when a user clicks outside
it. Any entered search terms are displayed within the header itself
while the normal header title text is changed to it's icon
representation. The iconic representation replaces the text when the
search field slides out as well. This is shown in the main document
right below the tabular data display. However, we'd like the sort
buttons on the left and the search icon on the right in a small
separate area of the header. Read the associated comment in the main
document for more details.
For the advanced search button, please look at
Archiving_Console_Advanced_Search_20140917.png to see the fields that
should be added. All the Header Search fields shown in the main
document should be present in the advanced search section. The
medium.com links I've added to the visual style section of the brief
should be used as inspiration for this.
We hope to have a cleaner drawing of the header search and advanced
search feature added to the brief soon. !Don't hesitate! to contact us
if you have any questions whatsoever.