Caring about UX, as a Developer - Laracon EU 2017

Transcript

1. Rizqi Djamaluddin http: //rizqi.web.id @__rizqi
2. Caring About UX, as a Developer Rizqi Djamaluddin http: //rizqi.web.id @__rizqi
7. Photo by Louis Lo on Unsplash
11. Worry About UX Now
13. Retrofitting UX doesn’t fix everything
14. Confusing check-out Unreliable search results Gave up payment Password reset confusing Help desk link hidden Can’t login on device Throttling too strict
15. The Airport Effect
20. The Secret
21. Secret #1: UX Work is Built on Educated Guesses
23. Secret #2 You Can Write Code To Help You Guess
24. Secret #3: You’re Responsible For Way More Than The UX Guys
25. Validation Messages Error Pages Form Hints Tooltips Confirmations CSS rules Everything Plays A Role
26. (don’t fire the UX guys… yet)
27. Getting Information
28. Over-the-shoulder testing Feedback Dogfooding
29. with Monolog Logging
30. public function addJobListing($request, $user) {
31. public function addJobListing($request, $user) { if ($user ->jobsPostedToday > 5) { return redirect() ->route('jobs.limit-exceeded', [$user]); }
32. public function addJobListing($request, $user) { if ($user ->jobsPostedToday > 5) { return redirect() ->route('jobs.limit-exceeded', [$user]); } $validator = Validator ::make($request ->only(['title', 'body']), $this ->rules);
33. public function addJobListing($request, $user) { if ($user ->jobsPostedToday > 5) { return redirect() ->route('jobs.limit-exceeded', [$user]); } $validator = Validator ::make($request ->only(['title', 'body']), $this ->rules); if ($validator ->fails()) { return $this ->errorRedirect('jobs.add', $validator); }
34. public function addJobListing($request, $user) { if ($user ->jobsPostedToday > 5) { return redirect() ->route('jobs.limit-exceeded', [$user]); } $validator = Validator ::make($request ->only(['title', 'body']), $this ->rules); if ($validator ->fails()) { return $this ->errorRedirect('jobs.add', $validator); } $job = $this ->jobService ->add($request ->title, $request ->body, $user);
35. public function addJobListing($request, $user) { if ($user ->jobsPostedToday > 5) { return redirect() ->route('jobs.limit-exceeded', [$user]); } $validator = Validator ::make($request ->only(['title', 'body']), $this ->rules); if ($validator ->fails()) { return $this ->errorRedirect('jobs.add', $validator); } $job = $this ->jobService ->add($request ->title, $request ->body, $user); return redirect() ->route('jobs.edit', [$job]); }
36. Log ::info("Something happened", ["foo" => $detail]);
37. public function addJobListing($request, $user) { Log ::info("New job listing submitted", $request ->only(['title', ‘body’]) ->toArray());
38. if ($user ->jobsPostedToday > 5) { Log ::notice("Job quota exceeded"); return redirect() ->route('jobs.limit-exceeded', [$user]); }
39. if ($validator ->fails()) { Log ::notice("Failed to validate job listing”, [ 'type' => 'validation', 'errors' => $validator ->errors() ->all() ]); return $this ->errorRedirect('jobs.add', $validator); }
40. Log ::debug("Job listing validated, adding to database", $request ->only(['title', 'body']) ->toArray()); $job = $this ->jobService ->add($request ->title, $request ->body, $user); Log ::info("Added new job listing", ['job' => $job ->id]);
41. public function addJobListing($request, $user) { Log ::info("New job listing submitted", $request ->only(['title', 'body']) ->toArray()); if ($user ->jobsPostedToday > 5) { Log ::notice("Job quota exceeded"); return redirect() ->route('jobs.limit-exceeded', [$user]); } $validator = Validator ::make($request ->only(['title', 'body']), $this ->rules); if ($validator ->fails()) { Log ::notice("Failed to validate job listing”, [ 'type' => 'validation', 'errors' => $validator ->errors() ->all() ]); return $this ->errorRedirect('jobs.add', $validator); } Log ::debug("Job listing validated, adding to database", $request ->only(['title', 'body']) ->toArray()); $job = $this ->jobService ->add($request ->title, $request ->body, $user); Log ::info("Added new job listing", ['job' => $job ->id]); return redirect() ->route('jobs.edit', [$job]); }
42. if ($user ->jobsPostedToday > 5) { event(‘job.add.error.quota-exceeded'); return redirect() ->route('jobs.limit-exceeded', [$user]); }
43. [2017-08-25 07:16:56] local.INFO: New job listing submitted {"title":"New Job","body":"We are seeking a new team member for our Laravel dev team."} {"user":1} [2017-08-25 07:16:56] local.DEBUG: Job listing validated, adding to database {"title":"New Job","body":"We are seeking a new team member for our Laravel dev team."} {"user":1} [2017-08-25 07:16:56] local.INFO: Added new job listing {"job":5} {"user":1}
44. [2017-08-25 07:25:52] local.INFO: New job listing submitted {"title":"New Job”,"body":""} {"user":1} [2017-08-25 07:25:52] local.NOTICE: Job quota exceeded {"user":1} [2017-08-25 07:25:52] local.NOTICE: Failed to validate job listing {"type":"validation","errors":["The body field is required."]} {"user":1}
45. Please do this.
46. Tweaking Monolog
47. https://github.com/Seldaek/monolog
48. Handlers
50. Special Handlers
51. $monolog ->pushHandler(new SlackWebhookHandler($webhook));
52. $monolog ->pushHandler( new SamplingHandler( new SlackWebhookHandler($webhook), 5 ) );
53. $monolog ->pushHandler( new FilterHandler( new SlackWebhookHandler($webhook), Logger ::WARNING ) );
54. $monolog ->pushHandler( new FingersCrossedHandler( new SlackWebhookHandler($webhook), Logger ::WARNING ) );
55. Processors
56. [2017-08-25 07:16:56] local.INFO: Added new job listing {"job":5} {"user":1}
57. class LaravelUserProcessor { public function __invoke(array $record): array { $record['extra']['user'] = Auth ::user() ->id; return $record; } }
58. Guidelines
59. Big, Obvious Signs
60. Booking Successful
61. Your Seat Is Reserved Just print or show this email to our station staff on Tuesday. Have a safe journey!
62. Your Seat Is Reserved Just print or show this email to our station staff on Tuesday. Have a safe journey! ECONOMY Rizqi Djamaluddin Argo Gede Express Jakarta Surabaya 8:30 9:15 WED, 6 DEC 2017 AM PM
63. Build Around Expectations
64. Your Seat Is Reserved Just print or show this email to our station staff on Tuesday. Have a safe journey! ECONOMY Rizqi Djamaluddin Argo Gede Express Jakarta Surabaya 8:30 9:15 WED, 6 DEC 2017 AM PM
65. Your Seat Is Reserved Just print or show your emailed ticket to our station staff. Have a safe journey! ECONOMY Rizqi Djamaluddin Argo Gede Express Jakarta Surabaya 8:30 9:15 WED, 6 DEC 2017 AM PM PRINT TICKET
66. Your Seat Is Reserved Check your inbox! Just print or show your emailed ticket to our station staff. Have a safe journey! ECONOMY Rizqi Djamaluddin Argo Gede Express Jakarta Surabaya 8:30 9:15 WED, 6 DEC 2017 AM PM PRINT TICKET RE-SEND EMAIL
67. Your Seat Is Reserved Check your inbox! Just print or show your emailed ticket to our station staff. Have a safe journey! ECONOMY Rizqi Djamaluddin Argo Gede Express Jakarta Surabaya 8:30 9:15 WED, 6 DEC 2017 AM PM PRINT TICKET RE-SEND EMAIL STATION MAP LUGGAGE FAQ
69. Consistency & Simplicity
70. Click Me!
71. Click Me!
72. EDIT E-mail rizqi@rizqi.web.id
73. “Easy to use, offers free soda. 5/5 would recommend”
74. “App did not warn me of orangutan tornado. One star”
75. Human Tone
76. Confirmation URL sent to your primary contact address.
77. We’ve sent you a welcome email to rizqi@rizqi.web.id.
78. We’ve sent you a welcome email to rizqi@rizqi.web.id. Please click the button in the email to confirm your account. This way we can verify your identity, and recover your account if you ever get locked out.
79. Arrr, nice meetin’ ya. What’s yer name?
80. Arrr, nice meetin’ ya. What’s yer name? Parameter “name” must match the regular expression ^([ \u00c0-\u01ffa-zA-Z'\-])+$
81. Watch for edge cases
83. Why, Not How
84. Password Password invalid.
85. Password Password too short.
86. Password Please provide a longer password (at least 10 characters). We host your websites, so dashboard security is critical. More Information
87. Why, not how.
88. ERROR: Email already exists.
89. You’re already registered.
90. You’re already registered. Proceed to login.
91. You’re already registered. Proceed to login. Forgot your password?
92. Pick the user’s perspective. “Your post code helps us estimate your shipping time” “Our couriers require your post code to deliver.”
95. Start logging, Train an eye for good design, And do join us in the fight to build amazing experiences.
96. Caring About UX, Especially as a Developer
97. Rizqi Djamaluddin http: //rizqi.web.id @__rizqi Caring About UX, Especially as a Developer