Caring about UX, as a Developer - Laracon EU 2017

Caring about UX, as a Developer - Laracon EU 2017

63acdaf1b04d9ca7162f4f8deea0219d?s=128

Rizqi Djamaluddin

August 29, 2017
Tweet

Transcript

  1. Rizqi Djamaluddin http: //rizqi.web.id @__rizqi

  2. Caring About UX, as a Developer Rizqi Djamaluddin http: //rizqi.web.id

    @__rizqi
  3. None
  4. None
  5. None
  6. None
  7. Photo by Louis Lo on Unsplash

  8. None
  9. None
  10. None
  11. Worry About UX Now

  12. None
  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

  16. None
  17. None
  18. None
  19. None
  20. The Secret

  21. Secret #1: UX Work is Built on Educated Guesses

  22. None
  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

  49. None
  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
  68. None
  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

  82. None
  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.”
  93. None
  94. None
  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