Redesign the edit state of maker profiles

barefoot-88 commented 2 years ago

Issue

At the moment, maker profiles are very basic and allow users to edit their static profile data (e.g Name, description, etc). However, this will change in the coming months as we begin to add more static and dynamic information to the maker profile.

Static information: Information that is attached to a maker profile does not regularly change. These are things like Name, Lightning Address, Avatar, Description, Timezone, Job Role, etc. Dynamic information: Information that is added to a maker profile over time as they become more active on the platform. These include Stories, Activity, Badges, Products (semi-dynamic as won't change too often).

Solution

As the maker profile becomes more complex and rich in data, makers will need a way to navigate the various elements of their profile - editing or viewing any information. For this to happen, I'd like to introduce a side navigation when the user accesses their profile's edit state. This state can be accessed by either:

Going to their profile and clicking "Edit profile" button on their main profile card
When the user clicks their avatar in the main page navigation bar (top right hand corner), a dropdown menu appears reading: Profile | Settings | Logout. If the user clicks "Settings", it should take them to the edit state of their profile. See #107

Once the user sees the edit state of their profile, the page should be structure using our 3 column grid layout (same in Stories, etc).

Left column ⬅️ User sees a page navigation card reading "Edit maker profile" with the menu options of "👾 My profile" (giving the edit access to their maker profile information) and "⚙️ Preferences" (giving them access to extra settings like Nostr comments, and later more). This card should be fixed to the top of the page when scrolling so the user can navigate between pages at any time.

Centre column ⬆️ In the centre column is the bulk of information shown as the user navigates through the various section of their profile and its settings. If the user has selected 👾 My profile then it will show a card containing their profile information, if they've selected ⚙️ Preferences, it will show a card outlining Nostr comments (v1), later to add more preferences and settings features (e.g Appearance, Notifications, etc).

Right column ➡️ In the right hand column is a card containing a preview state of the maker's profile (Avatar, name, job role, and description). Below this information is a Save Changes and Cancel CTAs. This card should be fixed to the top of the page when scrolling so the user can click "Save changes" at any time.

Web view

👾 My profile

⚙️ Preferences

Mobile view

johnsBeharry commented 2 years ago

hey @barefoot-88 why are there two save button groups?

barefoot-88 commented 2 years ago

hey @barefoot-88 why are there two save button groups?

Thanks for spotting. We can remove the save button group on the profile card in that case. Makes sense to have them in the right column so it can fix position during scroll and users can save at any point.

johnsBeharry commented 2 years ago

ye I like it on the right.

MTG2000 commented 2 years ago

A small question @barefoot-88 Is the save button on the right going to save changes across all the sections that the user made changes to?? I mean he may open his "Profile" section and change something, then open another section and change another thing. If he press "Save changes" now, will it save his changes across all the sections??

barefoot-88 commented 2 years ago

@MTG2000

A small question @barefoot-88 Is the save button on the right going to save changes across all the sections that the user made changes to?? I mean he may open his "Profile" section and change something, then open another section and change another thing. If he press "Save changes" now, will it save his changes across all the sections??

I believe it would, yes. One save button to rule them all. If they click save, it will ofc take them back to the un-edited state of their profile.

MTG2000 commented 2 years ago

@barefoot-88 Ah, okays.

Having a single 'save changes' button has its benefits indeed.

At the same time (and I might be wrong), I feel that keeping a 'save' button for each section has a little more benefits.

Mainly, when the user save his changes, he know exactly what he changed because they are in front of his eyes as opposed to these changes being in another hidden tab. Secondly, showing validation errors for each page. Thirdly, it's better to handle the case where some changes on some page may not successed for whatever reason, so we don't want to revert all the other changes that would have been saved successfully.

This approach is common in many sites like Gmail for example, where each settings page has its own save changes button. Or linkedin, where each section has its edit-in-place section and save btn.

barefoot-88 commented 2 years ago

Hmm. The Google & Linked-In examples seems to be more useful as they separate out the sections a bit more, rather than giving users the ability to make multiple changes in bulk. But maybe I didn't see the write journey, do you have screenshots you can share?

Personally, I think editing in bulk should be ok... but open to discussion @johnsBeharry

johnsBeharry commented 2 years ago

Perhaps we can do a design review in bitcoin design for this?

MTG2000 commented 2 years ago

do you have screenshots you can share?

Here on linkedin, you can see that each section has its own edit modal/page and a save changes for each one.

The same for gmail settings. Each tab has it's own (Save/cancel) actions

barefoot-88 commented 2 years ago

@MTG2000

To answer the question above, same Save Changes button for all navigation pages in the "Edit Profile" state... makes it easy.

Left Column (Navigation)

My profile (any information relating to the users profile)
Settings & Preferences (Nostr, Linked Accounts, etc)

This component is sticky whilst the user scrolls.

Middle Column (Information)

Selected page cards showing information (sometimes editable)

Right Column (Profile Preview + Save) - Sticky!

Profile preview (Avatar, Name, Description, Role)
CTAs (Save Changes, Cancel)

This component is sticky whilst the user scrolls.

If the user clicks Save Changes, the button shows a loading state. We then pop up a success message saying the changes have successfully been made to the profile.

barefoot-88 commented 2 years ago

Saving changes For saving changes, we want to avoid certain user errors:

Confusion when saving multiple batch changes
Batched saves failing due to one error on another tab...

To solve this issue, we can still use the right column buttons, however the way the user interacts with them lets them know that: a). Changes have/have not been made on a page (disabled -> Enabled states) b). If the user makes unsaved changes changes and tries to navigate to another tab, we can show a message saying "Make sure to save your changes before continuing."

barefoot-88 commented 2 years ago

peakshift / makers.bolt.fun