Layout Design Experiment

[lukasschor]

This is related to my comments here: #773 (comment)

Curently, secondary content takes up around 20-30% of the screen right at the top. We should experiment with different layout(s) to in order to put the primary content more into the user's focus.

In some cases, the user has to scroll to even see the primary action of this screen such as this "Save" button

Example

One example could be to combine the Safe information with the Safelist dropdown option in the header

Also there might not be a need to have the Send / Receive buttons at their current positions

It is already possible to initiate a transaction from the assets and Address book tabs. We might consider removing these buttons and compensate it by

• Adding a "+ Create Transaction" button in the Transaction tab, similar to for example the Remove Safe action button in the Settings tab.
• Adding a QR code button to Safe information to open up the Receive modal

[lukasschor]

Would be good to come up with 2-3 different design proposals on how to optimize the layout so we can collect some feedback.

[pablofullana]

@alongoni let's plan on providing @lukasschor with a 2-3 proposals

[alongoni]

Hi @lukasschor, I've been working in this 4 options. All options are focus in the secondary content, not changes at least for main content.

The options are from 1 to 4 progressively to less to more compact.

Option 1: The Safe Information and Send/Receive button joins in the header whith the Safe dropdown.
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=1%3A2&scaling=min-zoom

Option 2: Based on Option 1, but Tabs menu adapts to a vertical collapsable menu. Even It's can keep open when resolutions is big (see option 3).
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=25%3A147&scaling=min-zoom

Option 3: Based on options 1 and 2. The Send/Receive buttons go to the right, closer to the wallet connect information. In this prototype you can see how the setting section adapt to the new layout, keeping the save button more visible.
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=125%3A1&scaling=min-zoom

Option 4: The safe information dropdown go to the right, and the wallet connection information is now in the same dropdown. This design looks a bit cleaner.
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=43%3A198&scaling=min-zoom

Thanks!

cc: @nicosampler @fernandomg @pablofullana

[lukasschor]

Thanks. Interesting concepts!

Could you make one mockup that's a mix of these options?

1. Combined Safe list and Safe info in top-left corner from option 3
   

2. Expanding sidebar from option 4
   

3. Send/Receive buttons in the sidebar
   Either below or above the tabs "Assets" etc.

Then i would try to gather some feedback on these.

[alongoni]

Great!
This is the Option 5
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=193%3A5&scaling=min-zoom

[lukasschor]

Ths sidebar very much reminds me of Zenhub. And in Zenhub you actually switch Workspaces from the sidebar, too.

So maybe we should bring this part also into the sidebar

What do you think?

[alongoni]

I test the idea to put all together in the sidebar. The settings page have a diferent option to show the Safe Info.
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=217%3A1&scaling=scale-down-width

[lukasschor]

Collected some initial feedback and looks like we are getting closer :). Could you make a version based on this option:

But with the following changes

1. Also expands on hover like with option 4, in non-expanded view show only blocky for the upper section

2. Also show Fiat balance (total amount on this Safe)

3. Remove this number as it was perceived as the number of pending transactions

4. Only show the Send button, no receive button

5. Instead of the etherscan icon, have a QR code icon next to the copy-paste icon (basically replaces the Receive button)

[alongoni]

Hi, @lukasschor , I made the changes that suggested:
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=278%3A1&scaling=min-zoom

Additionally, in this other prototype I add a (+) button offering to users pin up the expanded version of the menu. This option can coexist with the expand on hover version.
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=282%3A1&scaling=min-zoom

[lukasschor]

Played around with it, too and tried out some ideas based on some initial feedback from other people. No particular strong opinion though.

@posthnikova
Could you maybe share your thoughts on these design experiments? Especially the last couple of mockups.

[tschubotz]

Nice prototypes!
I agree that the space could be a bit more optimized. Generally laptops have more horizontal space compared to their vertical screen real estate. Hence quite some dapp have side menus. This includes e.g. gmail, facebook, twitter, zenhub etc.

Here's my thoughts:

---

Maybe there's not even the needs to have the side bar collapsible. Do we really have that much info on the main part that it's necessary to collapse it?
If the side bar would be open all the time, switching safes becomes easier.

---

When we talk about saving precious vertical screen real estate, that empty white top bar seems like a waste of space.

Maybe we can move it up and introduce a right bar where things such as the connected wallet are displayed.

---

This plus seems to be I can add something. If its purpose is to expand it, I would rather used chevrons or arrows e.g.

---

maybe that send button isn't even necessary anymore. Since I would expect to go to the balances page where there is a send button per assets anyway.

---

Other than those points I like it a lot actually.

[lukasschor]

Tried a more extreme experiment based on @tschubotz 's feedback on the header. The space on the right hand side would allow for notifications to be displayed without interfering with the main content.

[lukasschor]

I generally agree with Tobi's other comments. But there are a few things to consider.

Maybe there's not even the needs to have the side bar collapsible. Do we really have that much info on the main part that it's necessary to collapse it?
If the side bar would be open all the time, switching safes becomes easier.

Yes, there's is probably no need to collapse regarding the horizontal screen real estate. The feedback I got when showing around the designs, was that for the screens where there is an additional sidebar/tabbar in the main content (settings, apps), it looks a bit weird with the expanded version. But maybe the solution there is anyways to take these tabbar options as collapsable options in the main sidebar.

maybe that send button isn't even necessary anymore. Since I would expect to go to the balances page where there is a send button per assets anyway.

I think we should leave it because

1. There is currently no other way to open up the "Smart Contract Interaction" feature, so we would have to introduce this elsewhere in the interface
2. Creating transactions is most likely the main action of the Safe Multisig, so it's fine if it's omnipresent in the sidebar in my opinion, even if there is other ways to open up the send flows.

[posthnikova]

I generally like the side bar on desktop. Let's look at responsive layouts. On 1024 it looks good:

At 720 the sidebar takes a lot of space, we probably need to collapse it:

Please note there are no hovers on tablets/smartphones so the sidebar would collapse on tap. On mobile the whole content of the sidebar would move to the top. Therefore this duplication is unnecessary: https://prnt.sc/sj29we

[KristinaMayman]

I agree the sidebar can work. I'm unsure about removing the top white bar entirely, I think the way that the connected wallet is floating on its own makes it look a bit like a notification.

I wonder how clear it would be in this version how to switch between Safes. The side arrow/chevron seems to suggest expansion or moving towards something more than a drop-down style menu.

I also wonder how users would see their Safe's full address with this design. Only by copying it?

[alongoni]

Hi! thanks to all for the feedback! it's so appreciated.

. Header (Top white bar): Agree with Tobias: it's a valuable space and we have to use it well.
. Side bar: Add a button (double chevron) at the bottom to collapse the sidebar. For large and medium resolutions the sidebar will be expanded by default. When the screens are small, the user can collapse it.
Here is the design:
https://www.figma.com/proto/WQVRO14fPQQn47AaNha16M/Layout-Design-Experiment?node-id=328%3A1&scaling=min-zoom

[posthnikova]

This is a quick prototype of my preferred behaviour: https://invis.io/T4XF6KSQX7M. Some thoughts:

Which view should be default: collapsed, expanded, or depending on the screen resolution? My preference is that it depends on the resolution: below 1024 collapsed view is default.

Should the sidebar expand on hover or on click, or both? I think both. There is 'fixed' state and 'hover' state. When the view is collapsed, hover opens 'hover' view which overlays the content. 'Fixed' view opens on click and condenses the content (grid should behave like this example: https://lh3.googleusercontent.com/aepyD62S5ymwEZPo_yWiDkdeQDkbXfvXyxuL0f3ldMVdrhCywcuN3_J0hlIc5dqZap8vtG05oaztns7G2wZBLVJsA0OLfRpZ4At2jw=w1064-v0).

Top bar: I think we should keep it. Currently it makes the landing page and the app look like it's the same service. When the content scrolls, connected wallet is always visible at the top. Plus we might need top bar in the future for dark mode switch.

Wallet dropdown: I modified proposed wallet info. I think we should keep the large identicon because it works nicely with other states: Connection error and Not connected https://prnt.sc/snbrts

Footer: I don't agree that footer should be part of the sidebar. It's not Safe-specific. And it's not visible in the collapsed state.

Some other ideas:
• Switch Safes inside sidebar (this was my second preferred version) https://invis.io/T4XF6KSQX7M#/418951901_Safe_List_Inside_Sidebar_1272px_
• Slider to browse through Safes https://invis.io/T4XF6KSQX7M#/418951948_Slider_1272px_
• Two levels sidebar https://invis.io/T4XF6KSQX7M#/418951946_Double_Sidebar_1272px_
• Switch Safes at the bottom https://invis.io/T4XF6KSQX7M#/418951950_Switch_Safes_Bottom_1272px_
• Switch Safes as a tab https://invis.io/T4XF6KSQX7M#/418951947_Safes_List_As_Tab_1272px_
• Collapse button at the top https://invis.io/T4XF6KSQX7M#/418951949_Switch_Button_At_The_Top_1272px_

[lukasschor]

@posthnikova Thanks a few thoughts:

Collapsable
I kind of agree with Tobi, not sure if we even need the sidebar to be collapsable. This would mean additional implementation effort, yet the actual value is unclear to me as we seem to have plenty of horizontal screen estate.

Wallet Dropdown
I would like to have more focus on the wallet type vs. the identicon, because it seems to confuse people to have two prominent identicons, especially as the difference between Safe address / connected Wallet has caused general confusion in the past. So the most important information there would be the Logo and type of the connected wallet, in my opinion. With secondary importance to the wallet address and identicon. And tertiary information being the network of the connected wallet (as we already show the notification if the network does not match the interface network)

Footer
Should we center the footer relative to the main content in the non-collapsed state? It looks off for me in this case

Double Sidebar
I really like the visual design of the double sidebar, and it would make switching Safes extremely fast. My concern would recognizability of the Safes, as I would assume barely anyone can decern their Safes just using the identicon. Would it show the name of the Safe on hover, is there another way to somehow show the name in the sidebar?

Other
I got pretty good feedback on calling the "Send" button "New transaction" instead. Do you feel strongly about calling it "Send" otherwise I would suggest to change it, at least for further feedback based on a clickable prototype.

[posthnikova]

not sure if we even need the sidebar to be collapsable.

@lukasschor Collapsing is only beneficial on small screens (below 1024). Expanded sidebar on such a screen wouldn't leave space for content at all https://prnt.sc/snd1rq. Collapsing should use this space https://prnt.sc/snd8g0

I would like to have more focus on the wallet type vs. the identicon, because
it seems to confuse people to have two prominent identicons

I wasn't aware of this. I don't have objections here.

Should we center the footer relative to the main content in the non-collapsed
state?

Yes, this is part of content grid.

Double Sidebar

I find this version not really viable, it's unclear how it would look with too many Safes.

Send

No strong opinion here, I will correct.

[posthnikova]

I made changes to wallet dropdown: https://invis.io/T4XF6KSQX7M. Other states:

[KristinaMayman]

I like the logos! Not sure about the identicons though, they are so small there one really needs to strain the eyes to look at them. Maybe it's better to just drop them.

[lukasschor]

I see you point @KristinaMayman. The main use-case is probably Metamask here, where a lot of people have multiple accounts and to quickly glanze if you are connected with the right account. I personally think this size would be sufficient for this, as it's usually enough to see if it's the "green one" or the "red one" :P

I would leave it in at least for the user test and see if there's some feedback on it.

[tschubotz]

I like this version with the big icon of the owner wallet type and the small identicon of the owner wallet address. That way the owner wallet identicon isn't competing with the Safe identicon and it's more clear that it "belong" to the owner wallet type.

[posthnikova]

I added all tabs (balances etc) and responsive layouts: https://invis.io/T4XF6KSQX7M. Starting to work on prototype for user tests.

[lukasschor]

Closing this for now. Will open a new implementation ticket, once we got back the results from the user tests.