Caring about UX, as a Developer - Laracon EU 2017

Transcript

1. 1.

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

2. 2.

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

   @__rizqi
3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

   Photo by Louis Lo on Unsplash

8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

    Worry About UX Now

12. 12.

    None
13. 13.

    Retrofitting UX doesn’t fix everything

14. 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. 15.

    The Airport Effect

16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    None
20. 20.

    The Secret

21. 21.

    Secret #1: UX Work is Built on Educated Guesses

22. 22.

    None
23. 23.

    Secret #2 You Can Write Code To Help You Guess

24. 24.

    Secret #3: You’re Responsible For Way More Than The UX

    Guys
25. 25.

    Validation Messages Error Pages Form Hints Tooltips Confirmations CSS rules

    Everything Plays A Role
26. 26.

    (don’t fire the UX guys… yet)

27. 27.

    Getting Information

28. 28.

    Over-the-shoulder testing Feedback Dogfooding

29. 29.

    with Monolog Logging

30. 30.

    public function addJobListing($request, $user) {

31. 31.

    public function addJobListing($request, $user) { if ($user ->jobsPostedToday > 5)

    { return redirect() ->route('jobs.limit-exceeded', [$user]); }
32. 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. 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. 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. 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. 36.

    Log ::info("Something happened", ["foo" => $detail]);

37. 37.

    public function addJobListing($request, $user) { Log ::info("New job listing submitted",

    $request ->only(['title', ‘body’]) ->toArray());
38. 38.

    if ($user ->jobsPostedToday > 5) { Log ::notice("Job quota exceeded");

    return redirect() ->route('jobs.limit-exceeded', [$user]); }
39. 39.

    if ($validator ->fails()) { Log ::notice("Failed to validate job listing”,

    [ 'type' => 'validation', 'errors' => $validator ->errors() ->all() ]); return $this ->errorRedirect('jobs.add', $validator); }
40. 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. 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. 42.

    if ($user ->jobsPostedToday > 5) { event(‘job.add.error.quota-exceeded'); return redirect() ->route('jobs.limit-exceeded',

    [$user]); }
43. 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. 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. 45.

    Please do this.

46. 46.

    Tweaking Monolog

47. 47.

    https://github.com/Seldaek/monolog

48. 48.

    Handlers

49. 49.

    None
50. 50.

    Special Handlers

51. 51.

    $monolog ->pushHandler(new SlackWebhookHandler($webhook));

52. 52.

    $monolog ->pushHandler( new SamplingHandler( new SlackWebhookHandler($webhook), 5 ) );

53. 53.

    $monolog ->pushHandler( new FilterHandler( new SlackWebhookHandler($webhook), Logger ::WARNING ) );

54. 54.

    $monolog ->pushHandler( new FingersCrossedHandler( new SlackWebhookHandler($webhook), Logger ::WARNING ) );

55. 55.

    Processors

56. 56.

    [2017-08-25 07:16:56] local.INFO: Added new job listing {"job":5} {"user":1}

57. 57.

    class LaravelUserProcessor { public function __invoke(array $record): array { $record['extra']['user']

    = Auth ::user() ->id; return $record; } }
58. 58.

    Guidelines

59. 59.

    Big, Obvious Signs

60. 60.

    Booking Successful

61. 61.

    Your Seat Is Reserved Just print or show this email

    to our station staff on Tuesday. Have a safe journey!
62. 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. 63.

    Build Around Expectations

64. 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. 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. 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. 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. 68.

    None
69. 69.

    Consistency & Simplicity

70. 70.

    Click Me!

71. 71.

    Click Me!

72. 72.

    EDIT E-mail rizqi@rizqi.web.id

73. 73.

    “Easy to use, offers free soda. 5/5 would recommend”

74. 74.

    “App did not warn me of orangutan tornado. One star”

75. 75.

    Human Tone

76. 76.

    Confirmation URL sent to your primary contact address.

77. 77.

    We’ve sent you a welcome email to rizqi@rizqi.web.id.

78. 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. 79.

    Arrr, nice meetin’ ya. What’s yer name?

80. 80.

    Arrr, nice meetin’ ya. What’s yer name? Parameter “name” must

    match the regular expression ^([ \u00c0-\u01ffa-zA-Z'\-])+$
81. 81.

    Watch for edge cases

82. 82.

    None
83. 83.

    Why, Not How

84. 84.

    Password Password invalid.

85. 85.

    Password Password too short.

86. 86.

    Password Please provide a longer password (at least 10 characters).

    We host your websites, so dashboard security is critical. More Information
87. 87.

    Why, not how.

88. 88.

    ERROR: Email already exists.

89. 89.

    You’re already registered.

90. 90.

    You’re already registered. Proceed to login.

91. 91.

    You’re already registered. Proceed to login. Forgot your password?

92. 92.

    Pick the user’s perspective. “Your post code helps us estimate

    your shipping time” “Our couriers require your post code to deliver.”
93. 93.

    None
94. 94.

    None
95. 95.

    Start logging, Train an eye for good design, And do

    join us in the fight to build amazing experiences.
96. 96.

    Caring About UX, Especially as a Developer

97. 97.

    Rizqi Djamaluddin http: //rizqi.web.id @__rizqi Caring About UX, Especially as

    a Developer