DXR UI Refresh: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Add Erik's wireframe pics.)
(Make changes that help readability on wide screens when word wrap happens.)
Line 9: Line 9:
== Basic Search ==
== Basic Search ==
The basic search form gets an always-present case-insensitivity checkbox, which checks itself as soon as the user enters any capital letters. I'm not totally sold on that last bit, but it's something a few of the users requested. We should spend more design time on it.
The basic search form gets an always-present case-insensitivity checkbox, which checks itself as soon as the user enters any capital letters. I'm not totally sold on that last bit, but it's something a few of the users requested. We should spend more design time on it.
[[File:Dxr_basic_search.png]]
[[File:Dxr_basic_search.png]]


== Advanced Search ==
== Advanced Search ==
Currently, nobody understands when the advanced search form shows up. It seems rather random. Now, it'll always be accessible via a disclosure control on the basic search form.
Currently, nobody understands when the advanced search form shows up. It seems rather random. Now, it'll always be accessible via a disclosure control on the basic search form.
[[File:Dxr_advanced_search.png]]
[[File:Dxr_advanced_search.png]]


== Initial Page ==
== Initial Page ==
DXR's current front page goes away, replaced with a code-browsing view.
DXR's current front page goes away, replaced with a code-browsing view.
[[File:Dxr_front_page.png]]
[[File:Dxr_front_page.png]]



Revision as of 23:33, 25 July 2013

Once upon a time, Schalk Neethling surveyed the userbase and heuristically analyzed the UI, resulting in some nifty mockups.

Then Erik Rose came along and did another round of wireframes adding these simplifications:

  • Removing the front page, which not a soul remembers the reason for and which complicates the implementation and visually destabilizes the UI when it goes "poof". (I think the UI was inspired by Google. But, unlike them, we don't have other properties to advertise, so we don't need a place to park a navbar.)
  • Teaching the query syntax via live feedback from the advanced search form rather than through written instructions. It's a little more JS, but users won't have to pogo-stick back and forth to a help page.
  • Making a few improvements to the multi-tree story

Basic Search

The basic search form gets an always-present case-insensitivity checkbox, which checks itself as soon as the user enters any capital letters. I'm not totally sold on that last bit, but it's something a few of the users requested. We should spend more design time on it.

Dxr basic search.png

Advanced Search

Currently, nobody understands when the advanced search form shows up. It seems rather random. Now, it'll always be accessible via a disclosure control on the basic search form.

Dxr advanced search.png

Initial Page

DXR's current front page goes away, replaced with a code-browsing view.

Dxr front page.png

Search Results

Dxr results page.png

File View

Dxr file view.png

Other Considerations

  • The need for the magnifying glass logo is diminished: we now have plenty of other ways to get back to code-browsing mode. Perhaps we can better use the space for something else.
  • The Navigation pane, also something which shows up apparently at random, should be more predictable and should have whatever kind of disclosure control we decide upon for the Advanced Search form.