איך מעצבים מוצרים אינטואיטיביים?
המשתמשים שלכם לא באמת קוראים הוראות, הם לא חוקרים את הממשק ובטח לא מנסים להבין למה התכוון המעצב.
הם פשוט ״זורמים עם זה״

אז איך אנחנו מוודאים שהחוויה שלנו תעבוד כשהם ״זורמים עם זה?״
>> לכל אחד יש בראש "תמונה" של איך דברים עובדים.

"הכפתור הצבעוני בטח עושה את הפעולה העיקרית."
"אם אני גורר קובץ לתיקייה, הוא נכנס פנימה."
התמונה הזו נשענת על מודל מנטלי. כשהעיצוב שלנו פוגש את הציפייה הזו, המוצר מרגיש אינטואיטיבי. וכשלא, המשתמש מרגיש אבוד >>

כשאנחנו מעצבים מסכים מורכבים, המשימה העיקרית שלנו היא לשלוט בעין של המשתמש. מה הוא יראה קודם, מה הוא יקרא אחר כך, על איזה כפתור הוא ירצה ללחוץ והאם הוא ימצא את המידע שהוא מחפש?

שרשור קצר (לא באמת) על איך שולטים בעין של המשתמש >> העין של המשתמש מחפשת במה להיאחז – הנקודה הכי בולטת במסך כדי להתחיל ממנה, ומשם לנקודת העוגן הבאה. אם אין נקודה כזו, או, גרוע מזה, יש חמש כאלה? המשתמש ירגיש מבולבל ושאין לו מושג איך להשתמש במוצר שלכם או מה אתם רוצים ממנו.
יש כמה דפוסי סריקה מוכרים שנצפו במחקרים:

בתכנון חווית משתמש אנחנו חושבים על כל המסע של אותו המשתמש, לדוגמא טיסה מתחילה ברכישת כרטיסים (אולי לפני) ממשיכה לשדה התעופה, למזוודות, לבורדינג וכו. בתהליך העבודה אנחנו עושים כל הזמן זום אין ואאוט מהחוויות הכי "קטנות" אל ההסתכלות הכוללת וחזרה.
הנה פירוק של דוגמה יומיומית >> סוף היום, כל הבית ישן, המשתמש שלנו רוצה לכבות את הטלוויזיה והאורות בסלון, ללכת לצחצח שיניים ולישון. פשוט!
כדי לפשט את השרשור נתמקד לרגע במסדרון מהסלון לחדר השינה.
מה הדבר הראשון שהוא רוצה לעשות? להדליק את האור במסדרון.
הבעיה? >>

מסקיומורפיזם לעיצוב שטוח

זוכרים כשבאייפון הכל היה מעוצב כאילו הוא הדבר עצמו? למה היום הכל שטוח? השינוי הזה קשור לבסיס של המקצוע שלנו - תקשורת חזותית
>> תקשורת חזותית, כשמה כן היא, צריכה לתקשר מסר באמצעים חזותיים ובעיצוב חווית משתמש המסר הזה הוא להסביר למשתמש איך משתמשים במוצר שלנו, אנחנו משתמשים בכלים חזותיים כדי לגרום לממשק להיות שימושי ולחוויה להיות טובה.

אחד הכלים המשתמשים אותנו הוא >>

איך מעצבים ענן? (חלק 2)

במיקרוסופט אני והצוות שלי חלק מארגון של מאות נשות ואנשי מקצוע שאחראים על העיצוב של אז'ור, הענן של מיקרוסופט.

בשרשור הזה (קישור לקודם בסוף), אדגים איך העיצוב של המוצר שלנו משתנה כשהוא מתפתח והצרכים של המשתמשים שלנו משתנים.
>> בהתחלה שירותי הענן שלנו היו יחסית פשוטים, וכך גם תרחישי השימוש, דוגמא נפוצה הייתה משתמש שצריך לעבור על רשימה של שרתים, למצוא את אלה ששטח הדיסק שלהם עומד להיגמר ולהגדיל אותו.
ההבנה הייתה שהמשתמשים שלנו מדלגים בין המשאבים שלהם ומבצעים פעולות קצרות, לכן הניווט וחלוקת המסך נראו כך >>

איך מעצבים ענן?

במיקרוסופט אני והצוות שלי חלק מארגון של מאות נשות ואנשי מקצוע שאחראים על העיצוב של אז'ור, הענן של מיקרוסופט.
מערכת שמפתחים אלפי מפתחים סימולטנית, בסקייל וברמת מורכבות כזו מביאה איתה אתגרים עיצוביים שונים, אנסה להסביר איך אנחנו ניגשים לפתור אותם >> לא אנסה להסביר מה זה אז׳ור או מה זה בכלל פלטפורמת ענן, אבל חשוב להבין שמדובר במאות מוצרים קטנים וגדולים (אפילו מאוד) שמתפקדים כמו מאות גלגלי שיניים במערכת מורכבת שניתן להשתמש בהם כמעט בכל שילוב שעולה על הדעת.
(בתמונה כל ה"מוצרים" השונים שנכנסים תחת הענן של מיקרוסופט) >>

עוגנים ויזואליים בעיצוב - שרשור שימושי
בעיצוב גרפי מדברים לא פעם על "לשלוט במבט של המשתמש", יש לנו לא מעט כלים כדי לגרום למשתמש להסתכל לאן שאנחנו רוצים, בשרשור הזה אדגים איך הכלים האלה יכולים לעזור למשתמש וליצור לו חוויה טובה יותר במוצר שלנו >> דוגמא ראשונה ומאוד מוכרת היא יצירת עוגן ויזואלי חזק שמשמש כ"בולט" ומאפשר לעין לקפוץ מהר לנקודת ההתחלה של הפסקה / תוכן הבא
לדוגמא ברשימה של פוסטים ברשת חברתית נהוג להשתמש בתמונת הפרופיל כעוגן כזה.
תראו כמה יותר קל לכם לדלג לפוסט הבא בדוגמא 1 לעומת 2 >>

עימוד תוכן על גריד - מדריך שימושי
בעיצוב למסך יש בגדול שני סוגי גריד:
1. גריד ״קשה״ - כשמחלקים את המסך לעמודות.
2. גריד ״רך״ כזה ש״נפרס״ ונקבע בהתאם לאלמנטים על המסך. השיטה השניה מוכרת גם כ8 פיקסל גריד (למרות שה-8 יכול להשתנות)
אז איך זה עובד? >> נגיד שאני רוצה לעצב מסך עם רשימה של ציוצים, אני מתחיל מיחידה בודדת שהיא ציוץ, ליחידה הזו 3 אלמנטים שם, תמונה וטקסט רץ, דבר ראשון עלי להחליט איזה אלמנט ״קשור״ יותר לאיזה (תיכף תבינו) קצת כמו עץ משפחה, מי אח של מי, מי בן של מי וכו >>

איך מעצבים מוצרים אינטואיטיביים? איך אנחנו גורמים למוצר שלנו להיות קל לשימוש? שאלות מיליון הדולר של אנשי חווית משתמש!
אני אוהב להשתמש בדוגמה של נהיגה, נהגים וותיקים יכולים לנהוג בלי להגדיש תשומת לב לפעולת הנהיגה עצמה, תפעול הרכב הפך להיות אינטואיטיבי בשבילינו
>>> אבל אם תיזכרו רגע בשיעורי הנהיגה שלכם, תיזכרו שהייתם צרכים להשקיע המון brain power בלתפעל את הרכב וזה ממש לא הרגיש פשוט.
>>>

הפוסט הזה של עומר מעלה נקודה מעניינת ולא פשוטה לניהול בחברות גדולות.
אנסה כאן להסביר בקצרה איך אנחנו מפתחים ומנהלים Design system שמשמש מאות מעצבים ואלפי אנשי פיתוח, הDesign system של אז'ור.
>>>

https://twitter.com/OmerPerchik/status/1542805779954208769

לאז'ור (תשתית הענן של מיקרוסופט) יש "פורטל" שמרכז חווית משתמש שמפותחות על ידי מאות צוותים שעובדים לחוד, בתחומים שונים ועם מטרות עסקיות ומוצריות משתנות, אבל המשתמשים שלנו משתמשים בפורטל הזה בצורה רוחבית ולא מעניין אותם מי פיתח מה, הם רוצים חוויה מוכרת ואחידה.
>>>

נשבע שלא תיאמנו, אבל כמי שבמשך כמה שנים היה אחראי על העיצוב של קוסטו ויכול לדבר עליו שעות, אשתף כאן איך פתרנו בעיה של רכישת משתמשים חדשים.

לפני הכל הבהרה, הרבה אנשים עבדו על המוצר ותרמו לו רבות - רב מה שאראה כאן לא אני עיצבתי.
>>

https://twitter.com/idofrizler/status/1531882538137837569

עידו הסביר מה המוצר עושה יותר טוב ממה אוכל להסביר בעצמי, אבל ניתן להבין שהוא מוצר שפונה לאנשים טכנים שמבינים מה הם עושים ומבינים ב"ענן" ו"דאטא", אחת הבעיות שלנו הייתה שרף הכניסה לשימוש במוצר היה מאוד גבוה.
>>

עיצוב יכול לשנות את התנהגות המשתמשים מהיסוד ולהפוך דפוסי שימוש שנדמים לנו ככאלה שלא ישתנו לעולם.
הנה דוגמה מעניינת על התפתחות עיצובית של הודעות סמס.
>> מי שמבוגר מספיק אולי זוכר את חווית ההתכתבות בטלפונים ישנים של נוקיה, הייתה תיבת "דואר נכנס" ו"דואר יוצא", אם רציתי לשלוח הודעה נכנסתי לדואר היוצא, לחצתי על הודעה חדשה, בחרתי איש קשר וקיבלתי מסך ריק לכתיבת הודעה. כשהיו מחזירים לי הודעה היא הייתה נוחתת בתיבת הדואר הנכנס. >>