901975 - Give users some confirmation text when they successfully create an event

Status: VERIFIED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Matt Thompson (@OpenMatt :OpenMatt)]

* When users enter an event at https://webmaker.org/events and then hit "submit event" button, they get no confirmation message or indication that their event has been entered successfully

* This is confusing UX. It leaves the user unsure of whether their event has been entered. 

* Can we create a dialog box that says: 

Thank you! Your event has been entered. Looking for help on next steps? Check out our handy event guides here: 
https://webmaker.org/events

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Elevating this to "major", because it's causing serious issues for users.
* Users are creating *20* or *100* duplicate events -- because they have no way to know that their event has been successfully created. 

* (adding Michelle T because I think she's feeling the pain on this one as well)

Comment 2

[David Humphrey (:humph)]

This would need a bit of UX work, and some implementation work.  I bet cade could do the latter, if Cassie/Gavin could get the former figured out.

Comment 3

[David Humphrey (:humph)]

This would need a bit of UX work, and some implementation work.  I bet cade could do the latter, if Cassie/Gavin could get the former figured out.

Comment 4

[Cassie McDaniel [:cassiemc]]

Attachment: Events-confirmation.png

Agreed: this is horrible.

Here is what's hopefully a really quick UI fix. Replace the form elements with this copy, as in this attachment. I have tweaked the copy slightly.

I considered making "event guides" a bigger button instead of a text link, but I don't actually think that's an ideal flow. Users would likely want to stay in events, and besides, I would think the event guides would be more helpful *before* planning an event as opposed to after. 

Given this, Matt do you want to reconsider the copy, or does this still work for you?

If possible, would be good to have this confirmation fade away automatically after, say, 5 seconds. If not possible (or easy), then clicking the "x Add an event" would close this panel completely and allow them to add another event if they wanted.

Note, the link should go to https://webmaker.org/event-guides

Cade, are you good to hack on this? Gavin, did you have any other input?

Hopefully this works until we can spend more time on this section!

Comment 5

[Chris DeCairos (:cade)]

I'll get this moving first thing tomorrow morning!

Should we provide the user with a link to the event they just created? I'm sure they'll want to link it out/double check what it looks like.

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

Cassie: I love what you mocked up. Looks awesome.

Comment 7

[Cassie McDaniel [:cassiemc]]

(In reply to Chris DeCairos (:cade) from comment #5)
> I'll get this moving first thing tomorrow morning!
> 
> Should we provide the user with a link to the event they just created? I'm
> sure they'll want to link it out/double check what it looks like.

If that's not hard to do then, yeah, great idea! I'll add it to the mockup.

Comment 8

[Matt Thompson (@OpenMatt :OpenMatt)]

+1 Chris -- that's actually *crucial*

Comment 9

[Amira]

I would really appreciate that Chris. It sounds like everyone knows how bad this is but I've just spent the last hour going through the extra 150+ events that were inputted in the last 24 hours because of this glitch and responding to community emails from people wondering if their event has been inputted - so urgency would be much appreciated on my end :) 

In the past the user has been taken directly to the event page they just created. That seemed to work well but I'm flexible with whatever works (and fastest option).

Comment 10

[Cassie McDaniel [:cassiemc]]

Attachment: Events-confirmation-2.png

Added a line that shares the link. I think this solution would be less disruptive than auto-forwarding, and is very explicit about what's happening. But am open to trying things out – Chris and I just spoke and he may be able to play with a few options tomorrow.

Re. the "copy link" button – not sure if this is a lot more work, but the main reason I wanted it was because the text – as a longer link – looks less readable, so we may need to play with this in the build as well.

Comment 11

[Chris DeCairos (:cade)]

woops

Comment 12

[Chris DeCairos (:cade)]

This branch is a simple solution that just opens the event info window after it is created.

https://github.com/cadecairos/webmaker-events/compare/bug901975-2

Comment 13

[Chris DeCairos (:cade)]

I'm implementing the mock-up now

Comment 14

[Gavin Suntop [:gvn]]

I'm not sure the "copy link" button is technically possible without using Flash.

Comment 15

[Gavin Suntop [:gvn]]

This solution for copying text doesn't rely on Flash, but does have an interim modal. Still, might be worth considering. I don't think we should introduce Flash into our codebase.

http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript/6055620#6055620

Comment 16

[Chris DeCairos (:cade)]

Attachment: implementation

Yeah, lets not get flash into our codebase.

I've implemented most of the mock-up, excluding the copy-link feature.

In order to avoid introducing a modal dialog that would have to mimic the create event dialog, I just plugged the confirmation dialog into the event creation form container.

The outcome is this is the attached file. There's some spacing tweaks in order, but it works.

Comment 17

[Chris DeCairos (:cade)]

I didn't implement a 5 second timeout on the dialog because that would be insanely frustrating to someone who's trying to read it/copy a link and then they have it disappear.

Comment 18

[Chris DeCairos (:cade)]

Attachment: https://github.com/mozilla/webmaker-events/pull/24

This pull request implements a confimation dialog that is displayed to the user after they successfully create an event.

@Cassie - check out Attachment 787642 [details] to see what this patch looks like. (I moved the "Thank you..." message up higher to balance out the spacing on the top and bottom)

Comment 19

[Matthew Schranz [:mjschranz]]

Comment on attachment 787648 [details] [review]
https://github.com/mozilla/webmaker-events/pull/24

Comment and after creating an event for me, the server crashes with:

Executing: UPDATE `Events` SET `title`='grgergerg',`description`='ergergergrg',`address`='Hamilton, ON, Canada',`latitude`='43.25002080000001',`longitude`='-79.86609140000002',`city`='Hamilton',`country`='CA',`attendees`=5,`beginDate`='2013-08-07 04:00:00',`endDate`='2013-08-15 04:00:00',`beginTime`='1899-12-31 15:00:00',`endTime`='1899-12-31 15:30:00',`registerLink`='http://test.com',`picture`=NULL,`organizer`='[e-mail]',`organizerId`='zinko',`featured`=0,`id`=2,`createdAt`='2013-08-08 18:34:18',`updatedAt`='2013-08-08 18:34:19' WHERE `id`=2

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: SQLITE_ERROR: no such column: city

Comment 20

[Chris DeCairos (:cade)]

Comment on attachment 787648 [details] [review]
https://github.com/mozilla/webmaker-events/pull/24

updated. delete your sqlite db, it's probably out of date.

Comment 21

[Cassie McDaniel [:cassiemc]]

Comment on attachment 787648 [details] [review]
https://github.com/mozilla/webmaker-events/pull/24

Looks great Cade, esp if the vertical space is balanced as you say :)

Comment 22

[Chris DeCairos (:cade)]

Attachment: https://github.com/mozilla/webmaker.org/pull/323

I've pushed and tagged webmaker events. This patch updates webmaker to use v0.1.15 of webmaker events.

Comment 23

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/54d8a82d552ff4e6524a3c86b01bc1843d8c29c9
Fix Bug 901975 - Update webmaker-events version to v0.1.15

Comment 24

[Chris DeCairos (:cade)]

This has been shipped to production!

Comment 25

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/e81272ce8e5899f75e72e5d3ea47fa371b8f6cb6
REDO Bug 901975 - Implement an event creation confirmation dialog https://github.com/mozilla/webmaker-events/commit/258a029341082cd22294f801601bd66c3c781766