Hour picker improved

I find the 2nd quicker and more enjoyable to use. Are there any technical issues created, or is it just a style change which is normally frowned upon?

@UXers what do you think between the two?

Yes, me too! I’m sorry to say that, but I confess I found this modal a little bit messy in the second part. Too much information, mainly when you select one of these two options:

• Specific days of each week
• Other options for repeating

And, to be honest, I don’t think it’s a good idea do add an external component that looks totally different from the rest of the interface, just because it looks nice. It makes sense when you want to achieve good usability for the functionality itself, but it runs the whole. And I don’t think I could implement a clock-like picker from scratch right now.

I know that sometimes the functionality comes first, but it would be nice if someone could do a new UX flow for this part, too.

But, in my opinion, the first option would be enough for the shortcoming. If you want to have something fancier, I’d suggest a new UX flow for the gather modal.

It would be good to have a new UX flow.

We have discussed separating that form into 3 forms which will reduce some of the options.

Phm/Btm

1. Post an activity/post a free resource you’ve found
2. Post yourself on the map/post something kind you can do you help
3. Post your group onto the map/Post a charity who will help people who are homeless

I get it, that sounds great!

While we still don’t have this new UX flow, would it be okay to use the 1st date picker?

I suggest that, if we are going to work on a new form, we could try to use more about this Material Design library. The only downside is that we would have to change fields in some other parts of the platform too. But I personally think that it would enrich the product!

We did have material design on our main menu, I guess someone rebuilt that.

I’ll let you decide based on how much work is involved with each, given that the 1st one will probably be done again in the near future.

So if the 1st is a quick task then go with it. If it’ll take a while then it’s probably better to do the job just once

Great! So, the first one is quicker to implement than the second one.

So I will use the first one for now, and once the @UXers draw the new UX flow for the form, we can implement a new form taking advantage of the components from this lib https://react-md.mlaursen.com/

It’s late here and I am going to sleep. If I find some time during the week, I will try to finish this task.

Thank you, @AndyatFocallocal

Awesome. Thanks for your efforts today

Hello!
I may be able to help here, I’m working on a new form for my company and I think I’ve studied all the research and academic literature there is about forms

Could you just tell me where I can see this functionality?

Great timing. The most recent version is in publichappinessmovement.com. click gather on the map to view it.

Given that you are possibly a leading expert on forms right now feel welcome to take over responsibility for Improving that area of the site

Perhaps you guys could bounce ideas off each other

So, I’m trying to use the first plugin here to handle the time picker. However, when I select a time, the form automatically refreshes the page. I tried to use events like stopPropagation() and preventDefault() but they just don’t work as I expected.

When I went deeper into the code, I found out that it is more complex to understand than I presumed. I don’t know if it should be this complex, or if I am only unskilled. But I just cannot understand how it works. The code was written two years ago, and probably those who wrote them have more experience with React than I do.

As you and @Mateo have been discussing about a new UX flow for the form, I wonder if this shouldn’t be the time to implement it. Because I think it would take me too much time to understand what they did with this form. I am sorry for not being helpful this time.

You were helpful. You understand more about our code in that area than anyone actively coding now. @ArtyS has worked on them and is available to answer questions. (Not sure he’s got our app installed so might be a while before he sees this though).

Hello again,

I have questions

1. Do you think we could make the “Gather” button more visible? I didn’t see it at first and it seems to be the second most important thing after “Joining an event”, no? Maybe all actions should be on the white column on the right.
2. Could we have the whole form on the right side in the white column? (see example after)
3. What is the purpose of the “Put myself on the map” functionality? Do you think we may separate those things as all the other fields don’t relate?
4. What is the last field about in the first page of the form? There is no label.
5. What is the size of the border radius on buttons and fields? (so my design is similar)

Things I added / modified
a. Made the “Clear all field” button more visible.
b. Added an asterisk to obligatory fields.
c. Took out the “magnifying glass” icon that doesn’t do anything.
d. Added a label for the last field of the first screen.
e. I’ll move the time of the event on the right side of the day, and then the end time and end hour on another line (so we read on a Z pattern)
f. Can make the “Until” fields
g. For the time thing, I would leave a blank field and it show different things depending on what the user inputs. If I enter a 1 for example, I see [10:00;10:15;10:30…] on the dropdown, If I add a 2, I see [12:00;12:15;12:30…].

To-do
I Design error states and clear messages
II Design dropdowns and auto-focus elements
III Design “Specific days of each week” and “other options for repeating” options

Here are the example with the pop-up and the column layouts

Gather - Pop up – 11727×892 360 KB

Gather - Pop up – 21727×892 357 KB

Gather - Column1807×935 616 KB

Wow, that’s some excellent work!

I’ve changed to numbers/letters/numerals to make replying easier

1. This ties in with the redesign of the Global (forum) side. We designed a floating footer which is always present but has three different sets of buttons to match the area of the site: [Floating Footer] Floating footer created

The idea being that we highlight the key actions available to users, particularly on a mobile. So gather would be next to their thumb all the time

(Myself and a few others chipped in to pay a company to build it as the ruby team hasn’t been active in waay too long and we needed some progress… but they were very cheap and communication was tough and didn’t work out)

2. We could do if you can define reasons why it’ll be better for users. The UXers who designed it wanted it broken into stages as a long form makes some users drop off because of the effort required. So the decision was to break it up and make it feel more manageable.

The other thing they said was that full screen was good as it removed all distractions. The UK Government Portal was used as a template to follow (although we only went half way towards that vision which would turn each question into its own page).

3. I agree that isn’t clear for users. The idea is that users can post an activity (gathering), or post themselves onto the map (using a nearby landmark) so others can message them and invite them to meet for a public happiness gathering. To help users find others nearby and self organise meetings and activities. In the future we’ll build an ‘invite all within 2/5/10/20km’ function to power this up.

In the brighter tomorrow map this is used for ‘post an existing resource you’ve found’ and ‘post something kind you can offer to do’, so users are still posting themselves to the map, but with the theme of ‘here’s something kind I can offer to do to help people who are homeless near me’ (guided by crowd sourced ideas in our Reddit forum)

This is purely my idea, but I think this ‘post yourself onto the map’ should be moved into the users profile section, and we automate a notification which can only be removed by completing the form. Users can set their category as ‘currently unavailable’ if they don’t want to be contacted by others nearby.

4. This is for choosing category/ies. In my browser I see the title as grey text in the box. Users choose the applicable categories and it changes some options in the form.

5. I’m afraid I’m not sure. This was designed before we began documenting everything.

a. This is/should already be solved in the codebase actually. It was a task someone completed. Right now the backend is doing something odd and it’s interfering with this change. I think its loading two different branches and squishing them together. We need some more members in @SysAdmin to tidy it up.
b. I’m surprised we missed this. Good spot
c. The one in the main menu at the top?
d. If that’s easier for users, sure. Create it as a task for the @ReactMeteor team. The same for (b and e)
e. Awesome
f. Not sure what’s meant, can you expand this plz?
g. I’ve seen that around a lot. I do like the visual clock version most though. It’s so easy

I great, create a task for it tagged Backlog or Sprint
II groovy, create a task for it tagged Backlog or Sprint
III this has always been overly complex for users. create a task for it tagged Backlog or Sprint

@Mateo I’ve replied to your excellent work. We should begin pulling them out into their own threads.

Hello here,

Here are my answers to yours

1. Ok, but I don’t understand where it will be then, on the bottom of the page on the desktop too? @UXers, don’t you think this may be problematic or hard to find? Could it behave differently on desktop and mobile?
2. Yes, breaking it into stages makes sense, I was just trying to find some use for this column
3. I think your idea of having it in the profile of the user would be better, it may be hard to find if it’s in the Gather option.
4. Ok, we’ll have to add the label “Category” then.
5. Ok, no problem then.

a. Ok
c. The one in the “Select an address field”.
d. I might need an explanation on how to create a task, is there a guide where I can look at that?
f. Oups I didn’t wrote all the message here: is the until field mandatory? Should we hide it by default and add a checkbox? Not very sure about this one.
g. We may need some research here on which is more efficient, but by default I would say users are more used to what they found on other website so we shouldn’t change what is working for them (see Jakob’s law on mental models). Ux team, any recommendations? I also feel this format may look strange for younger users.

For the tasks, same as d., can I create them and assign it to me directly?

That’s it, sorry for taking so much time for answering

Regards, Mateo

1. it could behave differently. Its on the Z users follow but fairly low priority. Then it follows users while they scroll like a frame they are viewing our site through, so that would make it far more noticeable. The mockup focused on mobile and a trendy footer bar which many sites have begun using. around 83% of our traffic is on a mobile device and our app is just about launching.

Do you think a floating footer that follows the user in every page to show them the main functions in that area of the site wouldn’t be noticeable and convenient on a larger screen?

2. I understand that. the column looks lovely, but i’m not sure the info in it now is really necessary. Giving users a quick overview does seem to prevent them from actually opening the page where they can interact. The UX team did some small scale testing on this a while ago and came up with the conclusion.
   Our site has the ethos of promoting quality engagement rather than quantity engagement, like most other social sites do. We want users to contribute to planning and building events/projects/resources, and promote collaboration and support, rather than ‘click and move on’.

3. Agreed

c. ah, i see it. cool
d. there is this: The Switch to Tag-Pages (with examples how to use them effectively)
its lacking in detail. i’ll improve it right now
f. i think this will be easier to work out when we design how to split the forms up. Users/Fixed resources are likely to be indefinite/until someone wants to take them down so hiding that option unless they specifically want it, makes sense. If posting a single gathering/resource, then that option should be visible as it’s likely just one day, or one day each month.
g. i expect that research already exists. we could do it again, or search for it online. i have a strong enough feeling that users will prefer the clock face so that doesn’t bother me too much. If you think its important you are welcome to post it as a task and give it a go.

yes you absolutely can create them and assign them to yourself. no worries about the time, it’s really enjoyable having you here

Hello guys, sorry but I’ve been busy lately and it’s a little bit hard to find some time to work with this task. Anyway, managed to catch up on what you discussed. Thank you @Mateo and @AndyatFocallocal for your contributions here.

I liked what Mateo did. However, I still wonder if we could make this form easier. Do we really need to collect all this data?

Secondly, don’t you think there is a better way to select an event’s recurrence? Just try to imagine, we have easier ways to set this up, like on google calendar or creating an alarm. Maybe these examples can help us find a better approach to this.

Also, what is the difference between “Intro”, “Event Details” and “Tell us more”? Why don’t we have a single box where I can add all the details?

And lastly, what is the difference between “Creating a Public Happiness Activity” and “Putting Myself on the Map”? Is there a practical difference between these two events?

Yes you’re definitely right, I think we should reduce the amount of information we are asking for, we should define what is mandatory. Only the name ? Name + Time + Address + Information ? I didn’t want to change too much things that are already existing, but if we can move things there, I’ll put only these four fields, so there is only one screen, and the rest can be added in the event’s page.

For the recurrence, yes, the google design is good.

For the “put myself on the map”, we were thinking about moving it out of the Gather option.

What about something simple like that? (needs some work but just for the idea)

gather643×661 22 KB

The plan from the original UX design with the second description box was to pull in an overview and a how to guide from the approved activity guide.

A few years back when the community was active, but almost all events created (on Facebook) members asked me to help create for them. We surveyed the community and writing the description and advertising their gathering was the most off putting part for them.

So the plan was to automate the description injecting the stock text in the larger description box, but to make it editable so they can change it if they want. That’s partly the reason for the ‘select activity’ drop-down… which does need to be redesigned (into an auto complete probably) when we have 500 approved activities rather than the current 12ish. The other reason is to help users filter on the map.

This is also why we help users recreate the activity on other social media platforms with the splash page after they submit the form.

Keeping with the theme of minimisation I’d suggest the stock text for that activity is hidden, but can be opened and then edited or deleted with a click.

(Users can only post activities approved by the rest of the community. Anyone can suggest a new idea. Once approved for a trial after discussion, then tried and reviewed, it goes into the suggested activities list for others around the world to recreate)

The video links are to encourage users to use our platform to gain views and followers for their kindness based videos, which will be a strong pull for existing groups, communities and industry leaders. It’s a very powerful system for increasing their views, likes and followers. We also wanted to help them promote their other social media profiles.

Essentially this is ‘giving back’ to users by helping them promote their kindness based activities