通知UIを改善している話

by shira

Slide 1

Slide 1 text

௨஌UIΛվળ͍ͯ͠Δ࿩ 2023.05.31 ΞΫηγϏϦςΟ΍ΔͧʂLTࡇΓ Shirahama Kaori

Slide 2

Slide 2 text

ࣗݾ঺հ ShirahamaKaoriʢ9v9Shiraʣ ϑϩϯτΤϯυΤϯδχΞ @SmartHR 2022/8ʙ

Slide 3

Slide 3 text

SmartHR

Slide 4

Slide 4 text

SmartHR UI

Slide 5

Slide 5 text

SmartHR UI • https://github.com/kufu/smarthr-ui • SmartHR͕Φʔϓϯιʔεͱͯ͠։ൃ͍ͯ͠Δ   UIίϯϙʔωϯτ • SmartHRͷϓϩμΫτͰ࢖͍ͬͯΔ

Slide 6

Slide 6 text

௨஌ʹ࢖͍ͬͯΔ ίϯϙʔωϯτ

Slide 7

Slide 7 text

FlashMessage

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏ͸ඇਪ঑ʣ • toastͷΑ͏ͳίϯϙʔωϯτ • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத

Slide 10

Slide 10 text

FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏ͸ඇਪ঑ʣ • toastͷΑ͏ͳίϯϙʔωϯτ • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத ࠓ೔͸͜ͷ࿩Λ͠·͢ʂ

Slide 11

Slide 11 text

ͳʹ͕՝୊ͳͷ͔

Slide 12

Slide 12 text

՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦఺   Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ ରԠҊ   ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ   ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ   ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageͷ࢖ ༻͠ͳ͍

Slide 13

Slide 13 text

՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦఺   Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ վળҊ   ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ   ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ   ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageΛ࢖ ༻͠ͳ͍

Slide 14

Slide 14 text

՝୊2ɿؾ͖ͮʹ͍͘ ݒ೦఺   ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔ ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘ ରԠҊ   FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ   ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ   ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏

Slide 15

Slide 15 text

՝୊2ɿؾ͖ͮʹ͍͘ ݒ೦఺   ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔ ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘ վળҊ   FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ   ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ   ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏

Slide 16

Slide 16 text

FlashMessageͷ՝୊͸ Θ͔ͬͨ

Slide 17

Slide 17 text

FlashMessage࢖༻Λ΍Ίͯ Ͳ͏͢Δ͔ʁ

Slide 18

Slide 18 text

ରԠํ਑ • Ϣʔβʔ͕ૢ࡞ͨ͠ૢ࡞ର৅ͷۙ͘ʹϝο ηʔδΛදࣔ͢Δ • ্ه͕ࠔ೉ͳ৔߹ɺʮNoti fi cationBarʯͰ ϝοηʔδΛදࣔ͢Δ

Slide 19

Slide 19 text

Noti fi cationBar

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Noti fi cationBar (SmartHR UI) • https://smarthr.design/products/components/noti fi cationbar/ • ࢖͍Ͳ͜Ζ • ૢ࡞ޙʹɺը໘શମ͕੾ΓସΘΔͱ͖ • μΠΞϩάͰૢ࡞͠ɺݩͷը໘ʹ໭Δͱ͖ • ಛผͰॏཁͳ৘ใ΍͓஌ΒͤΛදࣔ͢Δͱ͖

Slide 22

Slide 22 text

ରԠͷྲྀΕ

Slide 23

Slide 23 text

ରԠͷྲྀΕ 1.ͲͷΑ͏ͳૢ࡞/ॲཧΛߦͬͨ࣌ʹϝοηʔδΛ   ද͍ࣔͯ͠Δ͔ਫ਼ࠪ 2.ύλʔϯผʹ෼ྨ͠ɺ֤ରԠํ਑Λݕ౼ 3.νʔϜͷσβΠφʔͱೝࣝ߹Θͤɾௐ੔ 4.νʔϜશମʹల։͠߹ҙɾܾఆ 5.ը໘͝ͱʹରԠΛਐߦத

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ϝοηʔδදࣔύλʔϯ μΠΞϩά   ɹμΠΞϩάΛด͡ͳ͍৔߹ɿϘλϯ෇ۙ   ɹμΠΞϩάΛด͡Δ৔߹ɿNoti fi cationBar μΠΞϩάҎ֎   ɹϘλϯΛԡͯ͠ߦ͏ॲཧͷ৔߹ɿϘλϯ෇ۙ   ɹ্هҎ֎ɿNoti fi cationBar

Slide 26

Slide 26 text

Α͔ͬͨ͜ͱ • ࠷ॳʹύλʔϯਫ਼ࠪͱ֤ରԠํ਑ΛܾΊΒΕ ͨͷͰରԠΛ໎ΘͣਐΊΒΕͨ • ௨஌Λग़͢ύλʔϯΛ੔ཧ͠υΩϡϝϯτԽ ͨ͜͠ͱͰνʔϜͰڞ௨ೝࣝΛ࣋ͯͨ • ͜Ε·Ͱ͸௨஌UI͕ࠞࡏ͍ͯͨ͠ • ػೳ௥Ճ࣌ͷ௨஌UI΋໎͍ͬͯͨ

Slide 27

Slide 27 text

͓ΘΓ