Posted on

חשיבותן של מיקרו אינטראקציות בממשק

אז מה הן בעצם מיקרו אינטראקציות?

מיקרו אינטראקציות הן אנימציות קטנות וקצרות שקורות כאשר המשתמשים מסיימים לבצע משימה מסוימת, מטרתן לייצר רגעים של מעורבות ולתת פן אנושי יותר לממשק (דילייט).
למיקרו אינטראקציות יש ארבעה מרכיבים עיקריים:
טריגר – הטריגר מתחיל את מיקרו האינטראקציה, הוא יכול להיות מופעל ע”י המשתמשים או ע”י המערכת (כאשר המערכת מזהה תנאים להפעלת האנימציה).
חוק – ההגדרה למה שקורה אחרי שהאנימציה הופעלה
פידבק – נותן למשתמשים להבין מה קרה, כל דבר שהמשתמש רואה, שומע, מרגיש בזמן האנימציה.
לופ – כיצד משתנה האנימציה כשמשתנה החוק והתנאים שמפעילים אותה.
מדוע מיקרו אינטראקציות חשובות?
מיקרו אינטראקציות עושות את ההבדל בין אתר/מוצר מובן ומהנה לבין כזה שהוא לא. הן מוכיחות שנעשתה חשיבה עמוקה על המוצר ועל המשתמש עד לפרטים הקטנים ביותר.
מיקרו-אינטראקציות עוזרות ב:
• ניווט באתר
• מקלות על האינטראקציה בין המשתמשים למוצר
• נותנות מידע על אלמנטים בממשק והאם הם לחיצים או לא
• מכוונות את תשומת לב המשתמשים
• הופכות את הממשק ליותר אנושי
מתי להשתמש במיקרו אינטראקציות
דוגמאות לשימוש נכון במיקרו אינטראקציות
• Swipe- אנימציות מהסוג הזה מפחיתות לחיצות והופכות את החוויה להרבה יותר חלקה ואינטראקטיבית. הן עוזרת למשתמשים לעבור בין טאבים על מנת לקבל עוד מידע. מדובר בהתנהגות מאוד מוכרת ומקובלת כך שניתן לבצע אותה באופן כמעט אוטומטי ולהבין מה יהיה הפידבק.
• Data Input -כולנו מכירים את התסכול של להכניס לקבוע (למחוק) סיסמא שעשויה להיות לא נכונה בשדה
.אמנם אנימציה של חוזק הסיסמא היא מוכרת וידועה אך אנימציה שמעדכנת את חוזק הסיסמא תוך כדי ההקלדה, נותנת פידבק חזק יותר למשתמשים.
• טוטוריאליים –שימוש במיקרו אינטראקציות בטוטוריאליים הופך אותם ליותר אינטראקטיביים, ועוזר לכוון טוב יותר את המשתמשים לעבודה נכונה עם המוצר ע”י הפשטת התהליך והדגמתו.
• הנעה לפעולה- מיקרו אינטראקציות דוחפות קלות את המשתמשים לאינטראקציה עם הממשק. הן מספקות תחושת הישג, ומחזקות את האמפטיה של הממשק ביחס להתנהגות המשתמש.
• כפתורים מאונמצים-כפתורים מאונמצים מכוונים את דרכם של המשתמשים במוצר, והן דרך טובה למקד את תשומת ליבם של המשתמשים למידע. חוויות קטנות כמו מעברים בין מסכים או הדגשה של פיצ’רים מסוימים יכולים לעשות הבדל ענק בחוויה הכללית.
כיצד לעצב מיקרו אינטראקציות
• שימו את עצמכם בנעלי המשתמשים- השתמשו בכל הכלים שלכם כדי לעזור למשתמשים להבין את המוצר.
• צרו אנימציות פונקציונליות- אנימציות שהן לא רק יפות אלא גם מגבירות את החוויה במוצר.
• תהנו- ההנאה שלכם תעזור לייצר מוצר כיפי יותר, מה שיגרום למשתמשים להפוך למשתמשים חוזרים.
• אל תעצבנו את המשתמשים- יותר מדי אנימציות יכולות להשיג את האפקט ההפוך ממה שאנחנו רוצים ולעצבן את המשתמשים.
• שימוש בשפה אנושית- השתמשו בשפה אנושית ולא טכנית. קופי אירוני או משעשע יכול לגרום למשתמשים לשכוח כמה זה מתסכל להגיע לדף ריק.

 

מאמר מקור: https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0What are micro-interactions?

Posted on

ההבדל בין מוצרים מכוונים משימות משתמש למוצרים מוכוונים מטרות משתמש

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

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

מאמר מקור: https://uxdesign.cc/start-designing-with-goals-in-mind-4723df5f8e88

Posted on

מפת אמפטיה, מפת מסע משתמש וההבדלים ביניהם

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

 מקור: https://medium.com/@harrybr/how-to-run-an-empathy-user-journey-mapping-workshop-813f3737067

Posted on

רפואה ומוצרים דיגיטליים

הפעם אמל”ק בנושא סופר מעניין וקרוב לליבי, רפואה ומוצרים דיגיטליים.
שני הסנט שלי ממספר מאמרים שקראתי בנושא, רפואה דיגיטלית או מכשור רפואי נמצאים באזור בו הטכנולוגיה היא סופר חדשנית אך נוחות הממשק והנראות שלו, לא תמיד מהווים את המילה האחרונה בתחום UX/UI.
לשמחתי הרבה ישנה מגמת שיפור בעניין ומוצרים רפואיים מתחילים ליישר קו עם עולם ה UX/UI.
הכותב מספר בכתבה על משפט שאמר לו אחד הרופאים במחקר המשתמשים שלו:
הדרך להפוך את מלאכת התיעוד לקלה יותר היא לזרוק את המחשבים מהחלון.
אמירה זו נובעת מהתסכול שחש אותו רופא מהמאבק שלו בתיעוד הערות המטופל- דבר שלקח לו מספר דקות כשהוא היה צריך לכתוב את זה באופן ידני.
רופאים בארצות הברית משקיעים 4 שעות אקסטרה בכל שבוע בתיעוד אלקטרוני של רשומות רפואיות.
הבעיה טמונה בכך שרפואה דיגיטלית בדרך כלל מפותחת כטכנולוגיה והן נועדו לענות על שאלות כמו איך אנחנו יכולים לחבר את כל המערכות האלו? איך להבטיח את סודיות המידע הרפואי?
1. צאו מנקודת הנחה שאנשים לא מקבלים הכשרה
תוכנות בתחום הרפואה מגיעות עם מדריך של מעל 100 עמודים מנוסחים בסגנון לחץ על X כדי לבצע Y. הציפיה מהעובדים בתחום הרפואה היא לשבת ולעבור את ההכשרה הזו אך בפועל אין להם את הזמן. המרפאה עמוסה בחולים אז הם מלמדים את עצמם ומנסים למצוא לבד את הדרך בחשכה. במקרים אחרים הקורס מתבצע חודשיים לפני שהם משתמשים במוצר בפועל לכן:1) צאו מנקודת הנחה שהעובדים לא מקבלים הכשרה. תכננו את המוצר באופן אינטואטיבי מספיק כדי שהם יוכלו לבצע פעולות בסיסיות כמו הוספת מטופל ומדדים, ואז למדו אותם לעשות את הדברים המורכבים יותר בהקשר שבו הם צריכים או עפ”י דרישה.
2) השתמשו בשפה שלהם ואל תמציאו שפה ייחודית לתוכנה שלכם.

2. עזרו להם לתעד באופן נפלא ומהר.
זמן התיעוד הוא הכאב הגדול ביותר ברשומות אלקטרוניות. אחות מבלה 2-3 שעות כל סופ”ש בסגירת הערות התיק מאחר וזה לוקח זמן רב מדי לבצע במהלך המשמרת. לא רק שזה מתיש זה גם יכול לגרום לפערי מידע שהיא נותנת לצוות הבכיר. זה לוקח כל כך הרבה זמן כי כדי שהמידע יהיה שמיש למישהו אחר הוא צריך להיות מובנה (נכתב כמו קוד) במקום בשפה הטבעית שלה, כך שצריך ללחוץ על המון כפתורים בשביל להבנות את המידע. כתוצאה מכך אנשים פשוט כותבים בשפה שלהם ומוסיפים למערכת מידע לא שמיש
.1) צרו דרך פשוטה להבנות מידע. באותה הקלות שאנחנו מתייגים חברים בפוסטים עובדי הרפואה צריכים להפוך את המידע למובנה.
2) תמיכה בפלואו לא רציף. עבודת האחיות נקטעת כל 6 דקות. צרו דרך בה האחיות יכולות לחזור להערות ולטבלאות שלהן מאוחר יותר.
3) אמצו את המובייל וכל דבר שתומך בממשק קול/טקסט, תמונות, ושירותי מיקום לעזור להם להוסיך מידע “על הדרך”.

3. היו נוקשים עם היררכיית מידע
רשומות רפואיות מאפשרות גישה טובה למידע על המטופל אך לרוב זה הרבה יותר מדי מידע בבת אחת. ההיסטוריה הרפואית של המטופל מרכבת ממידע חיוני כמו שבץ ומידע קצת פחות חשוב על הבעיות בקיבה. רוב המערכות מתייחסות לכל המידע באותו האופן מה שמצריך מהרופא לעבור על כל המידע.
1) הציפו את המידע החשוב 
אנשים צריכים גישה לכל המידע אבל הם לא צריכים לראות הכל בבת אחת.
2) “תרגיעו” עם הערות האזהרה
ככל שאנשים מקבלים יותר הערות אזהרה כך הם פחות מתייחסים אליהם. זה די דומה לעיוורון באנרים.
3) ספקו חיפוש ופילטרים מהממים.
באותה הקלות שאנחנו מחפשים ערך בגוגל אנחנו צריכים לחפש אסטמה ולקבל את כל המידע.
4. עזרו לאנשים לקבל החלטות
עזרו להם לזהות טרנדים בבדיקות. אנחנו יודעים באיזה טווחים יכולה להיווצר סכנה, הדגישו את הפרמטרים האלו בשלבים מוקדמים כדי למנוע אסון
.1) זהו והדגישו שינויים חשובים או דפוסים בבריאות המטופל
.2) אפיינו יחד
זהו עקרון שתקף לכל מוצר דיגיטלי, בד”כ אנשים לא אוהבים לאמץ תוכנות חדשת בעיקר כי הם לא היו חלק מתהליך העיצוב. אנחנו לא אחים ואנחנו לא מכירים את העבודה שלהם, לכן בלי לשתף אותם בתהליך אנחנו לא יכולים ליצור מוצר שהם ירצו לאמץ.

מאמר מקור:https://uxdesign.cc/5-principles-for-ehealth-design-3a9c662976a

Posted on

הצד האפל של הUX

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

Dark patterns הן לא טעות, הן תבניות שמכוונות באופן מובהק תוך שימוש בהבנה של הפסיכולוגיה האנושית לפעולות שהמוצר מרוויח מהן ולא המשתמש.
הארי בריגנל טבע את המונח הזה והוא ריכז באתר DarkPattners.org שעושים שימוש בתבניות כאלו. הוא טוען שבמבדקי A/B התבניות האלו דווקא מוכיחות ביצועים טובים ואחוזי המרה גבוהים לא כי הן מועילות למשתמש אלא כי הן מוליכות אותו שולל ולא עוזרות לו לקבל החלטות מושכלות. אלו תבניות לא אתיות.
כיצד תבניות אלו פועלות?
 האם אי פעם הרגשתם שאתם צריכים לבצע פעולה שאתם לא לגמרי שלמים איתה רק כי לא מוצגת לכם אופציה טובה יותר? כנראה שמצאתם dark pattern . למרות שרוב האנשים מאמינים שהתבניות האלו הן טריקים פסיכולוגיים, לרוב אין להם שום קשר לפסיכולוגיה של המשתמש והן פשוט דרך זולה לנצל את העובדה שמשתמשים לא קוראים את הטקסטים עד הסוף מאחר והם מעוניינים לסיים את המשימה שלהם במהירות האפשרית.
העניין ב Dark patterns שהן נבנות על אותם עקרונות שאנחנו בונים ממשקים שמעצימים משתמשים.
דוגמאות ל Dark patterns 
Forced Continuity
התבנית הזו מצויה בשירותים שבהם נדרש מנוי. כשאר משתמשים נרשמים לתקופת נסיון חינם הם מתבקשים למלא את פרטי האשראי שלהם וכשאר תקופת הנסיון מסתיימת כרטיס האשראי מחוייב באופן אוטומטי בלי שהמשתמש יזכור שהוא נתן את הרשות כך. לרוב למשתמשים אין דרך קלה לבטל את המנוי ולהספיק לשלם.
Bait and Switch
הדוגמא המפורסמת לכך היא הגישה המטעה של מיקרוסופט לגרום לאנשים לשדרג את המערכת שלהם מWindows OS לWindows 10. מיקרוסופט הציגו שני כפתורים: upgrade now or upgrade tonight במצב כזה במידה והמשתמש לא מעוניין לשדרג לווינדוס 10, איזו ברירה יש לו? בנקודה מסוימת גם הסגירה של חלון ההודעה גרמה לשדרוג המערכת.

Roach Motel
בתבנית הזו קל מאוד ליצור חשבון אבל קשה מאוד למחוק אותו.
דוגמא טובה לכך היא אמאזון, ניסיתם פעם לסגור את חשבון האמזון שלכם? זה כל כך קשה עד שזה כמעט בלתי אפשרי.
Privacy Zuckering
נקראת על שם מארק צוקרברג ומתארת את התופעה בה המוצר אוסף ומשתף הרבה יותר מידע ממה שהמשתמש מודע אליו.
פייסבוק מקשים מאוד מאוד על ניהול הפרטיות של החשבון. אין שקיפות אמיתית בנוגי למה שהחברה יכולה לעשות עם המידע שלנו, והפרטים נמצאים בתנאי השימוש שאף אחד לא קורה.
יותר מזה ישנם תנאי שימוש שבאופן דיפולטיבי מוגדרים מראש בלי שהמשתמש ידע כמו שכולם יכולים לחפש את מספר הטלפון שסיפקנו. מעט מאוד אנשים מודעים לכך ויודעים איך לשנות את זה.
הארי בריגנל יצר 12 קטגוריות של Dark pattern שכדאי להימנע מהן וריכז אותן באתר שלו.

מקור:https://blog.prototypr.io/dark-patterns-welcome-to-the-dark-side-of-a-user-friendly-industry-ef78ac95a5be

Posted on

Design Thinking

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

  • מטרות: מה המשתמש רוצה להשיג?
  • רצונות: מה המשתמש רוצה? מה נכנס תחת ההגדרה נחמד שיהיה?
  • צרכים: מה הכרחי למשתמש?
  • הקשר: מה הן הנסיבות/הסביבה שעשויים להשפיע על העיצוב?
  • נקודות כאב: מה הדברים המעצבים או הקשיים שיש למשתמש?

2. הגדרת הבעיהכאשר יש לנו הבנה טובה על המשתמשים שלנו, נשתמש במידע שלנו שצברנו ונגדיר את הבעיה.הצהרת הבעיה צריכה להיות לא צרה מידי(שעלולה להגביל את היצירתיות שלנו) ולא רחבה מדי(שעלולה להיות בלתי פתירה).מתודה להגדרת הבעיה היא כיצד אנחנו נפתור את… (How might we).HMW עוזר לנו לנסח הצהרת הבעיה כשאלה שמעודדת פעולה.דוגמא טובה לשאלה כזו היא כיצד נוכל למשוך יותר את תשומת ליבם של המשתמשים לכפתור ה”קנה” על מנת להגדיל את המכירות?
3. העלאת רעיונותבהתאם לבעיה ולמה שאנחנו מנסים לפתור יש שיטות שונות של סיעור מוחות.שיטה נפוצה היא לכתוב על לוח מחיק את הבעיה בגדול ולקשקש מספר רעיונות על פתקיות דביקות (כן כן…אמרתי פתקיות דביקות ולא sticky note 😊 ) , המטרה פה היא שהסקיצות יהיו מהירות ומביעות את הרעיון המרכזי.אחרי שאנחנו כבר רוויים מרעיונות, ניקח צעד אחורה נסתכל על כולם ונקבץ לתמות רעיונות.שיטה נוספת היא לקפל דף לשמונה חלקים ולצייר את הסקיצות הכי פרועות שלנו על כל אחד מהחלקים.4. עיצובאחרי שהתמקדנו ב3-4 רעיונות נבחר את הפתרון שנראה לו הטוב ביותר ונעצב אותו.5. פרוטוטייפהשלב הזה הוא שלב אחד לפני הבדיקות ומטרתו להפוך את העיצובים שלנו לאינטרקטיביים כדי שנוכל לקבל פידבק על הפתרון.6. בדיקותבדיקות הן חלק חשוב בתהליך, באופן הזה אנחנו יכולים לקבל את המשוב שלהם, ולשפר את המוצר על פיו.

מקור:https://medium.com/swlh/design-thinking-436be4be40f6

Posted on

יצירת כפתורי הנעה לפעולה אפקטיביים.

כתבה קלילה עם קווים מנחים ליצירת כפתורי הנעה לפעולה אפקטיביים.
בעידן הנוכחי קשה מאוד להסב את תשומת ליבו של המשתמש, תשומת הלב האנושית עומדת על 8.25 שניות. ע”י הפניית תשומת הלב של המשתמש רק לאלמנטים מרכזיים, אחוז ההמרה יעלה.
אחד מהאלמנטים המרכזיים הם כפתורי ההנעה לפעולה באתרים ובמוצרים ומטרתם לגרום לפעולה אחת מאוד מסוימת: יצירת חשבון, הוספה לעגלה, קניית מוצר וכו’.
מספר קווים מנחים שיעזרו לנו לעצב כפתורי הנעה לפעולה שיגדילו את אחוז ההמרה
1. עקביות
עקביות היא אחד העקרונות החשובים שאותם מדגישה אליסון ראנג, כותבת UX בגוגול.
טקסט הכפתור צריך להיות עקבי אך לא בהכרח קצר, יש איזה איזון מסוים בין מספר המילים לבין המסר אותו אנחנו רוצים להעביר. מסר עקבי משמעו שלכל מילה יש מטרה.
אחת הדרכים לעשות זאת היא לבטא את הפעולה הנגזרת מהפתור בכותרת שלו.
2. בהירות
השפה היא עיקר כפתור ההנעה לפעולה, גם אם אנחנו משתמשים במעט מילים. בחירת המילים שלנו קובעת איך המשתמש יתפוס את הכוונה לפעולה שהוא צריך לבצע. שימוש במילים לא מדויקות עלול לגרום למשתמש להבין לא נכון את הכוונה ולהשפיע על החוויה שלו לרעה.
דוגמא טובה לשימוש לקוחה מAir bnb שמשתמשים במילה Reserve במקום Book מאחר וזה משקף את מדיניות התשלום שלהם בה הגבייה נעשית לאחר הצ’ק אין.
3. פוקוס
מאחר וכפתורים אלו מדריכים את המשתמש בתהליך ההמרה, יותר מדי “שלטים” יכולים לבלבל את המשתמש.
חשוב להגביל את מספר הכפתורים בממשק יחיד על מנת למנוע עומס קוגנטיבי, ככל שלמשתמש יהיו מספר מוגבל של בחירות כך יהיה לו קל יותר לבצע החלטה, ואחוז ההמרה יגדל. זו הסיבה שרשתות מזון מהיר הן בעלות תפריט מוגבל.
ניתן לראות שרוב דפי הנחיתה של מוצרים מבקשים מהמשתמש לבצע פעולה אחת: להירשם, לעקוב וכו’. כאנשי UX עלינו לברר עם בעלי העניין מה המטרה העיקרית של המוצר לפני שמחליטים על הקופי של הכפתור.
4. שימוש בצבעים מנוגדים
צבע הכפתור תלוי במספר גורמים: הרקע, צבעי המותג או אפילו טבע הפעולה בכפתור.
חשוב לבחור צבע כפתור שיהיה מספיק קונטרסטי עם הרקע על מנת שהוא יבלוט בין שאר האלמנטים ויתפוס את תשומת הלב של המשתמש.
5. מיקום חכם של הכפתור
בחירת מיקום הכפתור יכולה להשפיע רבות על תשומת הלב של המשתמש. ישנן שתי דרכים עיקריות לבחור את מיקום הכפתור:
האחת- הבנת המודל המנטלי של המשתמש
השניה- מסע המשתמש.
מודל מנטלי נקבע ע”י שימוש תדיר במערכת והבנה של איך היא עובדת.
כולנו יודעים שכפתור הרשמה נמצא בראש הדף בפינה הימנית גם אם לא ראינו את המערכת. ע”י הבנה איך המשתמשים שלנו משתמשים במערכת, נוכל מקם את הכפתור במקום הנכון. בנוסף הבנת מסע המשתמש יכול לעזור לנו לצפות לאן הוא יסתכל, מיקום הכפתור במקום הזה יכוון את המשתמש לפעולה.

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

7. בדיקות
הדרך טובה ביותר לעצב כפתור פעולה אפקטיבי היא לבצע בדיקות A/B כדי למצוא מה עבד למשתמשים שלנו.
סבבי הבדיקות יכולים לעזור לנו להסיק מסקנות ולדייק את הכפתור, בבדיקות המשתמשים כבר יעידו על הכפתור שעובד להם.

מקור: https://uxdesign.cc/7-cta-button-design-guidelines-4cdc21c2c85a

Posted on

כיצד לבצע מחקר UX בתקציב מוגבל

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

2. בדיקות שמישות
שיטה מוכרת ונפוצה במחקר משתמשים, בה אנחנו בוחנים איך המשתמשים משתמשים במוצר שלנו. זהו שלב נדרש בפיתוח מוצרים לווב ולמובייל. צפייה במשתמש מנתב בתוך האפליקציה, הקלטה של הפעולות וההצהרות שלו מספקות נתונים שצוות הפרודקט יכול לנתח. התהליך לא חייב להיות יקר.
3.בדיקות A\B
בבדיקות מהסוג הזה אנחנו מראים למשתמשים שתי אופציות שונות ומבקשים את דעתם עליהן. חשוב לבקש מהמשתמשים רשימה של יתרונות וחסרונות, בקשו מהם לאמוד את החוויה הכללית ושאלו אותם על היבטים ממוקדים של המוצר. אנחנו יכולים להשתמש בדאטה ע”מ לשלול תהליכים מסוימים ולהשתמש ביתרונות ע”מ ליצור פרוטוטייפ היברידי מהיתרונות שהוצגו.
4. שאלון אונליין
שאלון אונליין היא שיטה קלה להשיג מידע מאלפי משתמשים פוטנציאליים. יש צורך בהשקעה מסוימת של זמן בכתיבת השאלון, הפצתו וניתוחו. חשוב לוודא שאנחנו כותבים שאלות ממוקדות ומועילות על מנת לטרגט טוב יותר את העונים על השאלון. השתמשו ברשתות החברתיות, בפלטפורמות אונליין ואימיילים כדי ל”שנורר” תגובות לשאלון. זכרו שהמטרה של השאלון היא לצלול לתוך הפסיכולוגיה של המשתמש, איך הם מוצאים מידע? איזה סוג מידע רלוונטי להם? הערך של השאלון ואיכות התוצאות תלויים במידה רבה בסוג השאלות, ובאיכות טירגוט הקהל שלנו, לכן חשוב לנסח שאלון שהיתה מאחוריו חשיבה רבה ולבצע ניתוח ראוי לדאטה. משתמשים רבים לא אוהבים למלא שאלונים כך שצריך להיות מוכנים לכך שלא יהיה אחוז מענה גדול.
5.מחקר גרילה (שטח)
עונה על הצורך של חברות להגיע לתשובות במהירות. אפשר לקחת את המוצר ישר לשטח, לטרגט את האזורים שסביר שנמצא בהם אנשים שישתמשו במוצר שלנו, חשוב לבחור מקום בו לקהל יהיה את הזמן לעזור לנו (בתי קפה או פארקים). אפשר לבחון בשטח גם פרוטוטייפים. חשוב לזכור שיתכן ונקבל מידע גם מאנשים שלא מעוניינים במוצר שלנו, זה לא בהכרח רע מאחר שהם יכולים לציין מידע שלא חשבנו עליו, מאחר ולא בחנו את המוצר מנקודת המבט שלהם. אל תתעלמו ממשתמשים כאלו מאחר והם יכולים לעזור לשפר את המוצר למשתמשים מזדמנים אחרים.
6.קבוצות פוקוס
קבצו מספר משתמשים במקום בלתי פורמלי על מנת לדבר על המוצר שלכם. צריך להשקיע זמן להבטיח שקבוצת המיקוד מגוונת מבחינה דמוגרפית. התכוננו לפגישה, זהו חלקי מפתח של המוצר שעליהם תרצו לדבר, וודאו שלמדתם מספיק את הרקע של המוצר על מנת לענות על שאלות המשתתפים.

מאמר מקור:https://uxplanet.org/affordable-ux-research-tips-and-alternatives-28f553cadd3

Posted on

גריד, עיצוב רספונסיבי ומה שביניהם

היום חוזרים לבסיס, כתבה מעניינת שעושה סדר בכל נושא הגריד ועיצוב רספונסיבי עם טיפים מקצועיים איך להשתמש בהם.
נתחיל במעט מושגי יסוד:
Field Elements הם בעצם הבלוקים של העיצוב הם יכולים להיות טקסטים, תמונות או שילוב של שניהם.
רקעים לא נחשבים כבלוקים של עיצוב אלא אם כן הם משמשים כקונטיינרים לטקסט ותמונה. טורים בלוקים עבים של צבע אשר מהווים את רוחב התוכן. אלמנטים עיצוביים ציריכם לשבת על טורים,
בדר”כ מערכות עיצוב בנויות על גריד של 12 לדסקטופ, 8 לטאבלט, ו4 למובייל. רוחב טור נפוץ הוא בין- 60 ל80 פיקסלים. ריווחים הם השטח בין כל טור. 20 פיקסלים זה רווח נפוץ בין טור לטור. הריווחים חשובים לעיצוב אלמנטים של כרטיסיות כמו גלריית תמונות. חלק ממערכות מגדילות את הריווחים ככל שהמכשיר גדל, אך אפשר להשאיר את הריווחים קבועים.
שוליים צדדיים הם השטח הלבן מחוץ לרוחב התוכן, והרוחב שלהם עולה עם גודל המכשיר. שוליים מקובלים למובייל הם 20-30 פיקסלים והם משתנים בין טבלאט לדסקטופ. חשוב לבחור שוליים צדדיים שיהוו את המינימום של השטח הלבן כשאר אנחנו מכווצים את הדפדפן.
קווים מנחים
1. אלמנטים צריכים להיות בנויים על מספר טורים.
 האלמנטים יכולים להיות בנויים על 6, 3, 4 טורים העיקר שישבו על מספר טורים. כאשר אנחנו רוצים לחלק את התוכן לסקשנים עם מספרים כדאי שכל סקשן ישב על מספר טורים שיהווה את המיכל ולכל מיכל כזה יהיו שוליים צדדיים.
2. אל תשאירו אלמנטים בתוך הריווחים.
 האלמנטים צריכים לשבת על הטורים ולא לגלוש לריווחים שבין הטורים. זה לגמרי מחמיץ את המטרה של הגריד.

3. זה בסדר אם אלמנטים מקננים לא יושבים בדיוק על הגריד כל עוד האלמנט הראשי על הגריד.
 ישנם מקרים בהם אנחנו רוצים לעצב כרטיס ולחלק את התוכן והתמונה לשני חצאים שווים ואז נוצר מצב שהתמונה לא יושבת בדיוק על טור, והטקסט לא יושב בדיוק… זה בסדר כל עוד המיכל שמהווה את האלמנט הראשי יושב על גריד

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

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

מקור:https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01

Posted on

בסינית אייר בי אנד בי איך אומרים

כתבה סופר מעניינת על אפיון בהקשר תרבותי.
מחקר מעניין שנעשה כפרוייקט צד על Airbnb בשוק הסיני, ומתארת את הצרכים המקומיים במוצר גלובאלי.
מחקר שוק
 בשל הבדלי התרבויות, קשה לסינים לקבל את הקונספט של שיתוף דירות מכיוון שבתרבות הסינית שיתוף נשען על יחסים בין אישיים.
אמון ובטחון הם מכשול גדול מאוד לכלכלת השיתוף בסין.
בשל הגבלות על בעלות נדל”ן בסין, לרבים מהסינים אין נכס בבעלותם להשכיר. רוב הסינים בשונה מהאמריקאים גרים בקומפלקסים עם הגבלים חמורים על סבלאטים.
איך נראה שוק ההשכרות לטווח קצר בסין?
1. ביקוש גדול לדירות במעגל הראשון והשני של המטרופולין הגדולים
בנוסף לתנועת תיירים ערה לערים הגדולות כמו בייג’ין ושנחאי, הן מושכות “מבקרים ביתיים”, כלומר מבקרים סיניים מחוץ לערים האלו אשר מגיעים לשפר את תנאי העבודה, חינוך ושירותי רפואה.
בזמן בחינת האפשרויות שלהם בעיר הם צריכים דיור לטווח קצר.
2. ביקוש ברמה טובה במעגל הערים הרחוק יותר
דוגמא טובה היא סניה (הוואי הסינית). השוק מתחמם בערים אלו בזכות נקודות ציון ידועות ועלויות מחייה נמוכות דבר שמגביר את הנוחות לתיירים.
3. שאר השוק בסין- המעגל השלישי של המטרופולין
כמעט ואינו מתוייר
פרסונות
כדי לקבל תמונה ריאלית יותר של משתמשי Airbnb הכותבת בצעה מחקר בין חבריה שגרים בסין.
פרסונה 1 – אורח
צעירים אשר לומדים מחוץ לסין ויותר מערביים, קל להם לקבל את הרעיון של Airbnb
הם היו שמחים להיות מארחים אך בפועל אין להם דירה להשכיר- וההורים שלהם מתקשים לקבל את הרעיון של לתת לזרים לגור בדירה שלהם.
פרסונה 2-מארחים ואורחים
בעלי הלך רוח מערבי ומקבלים את הרעיון של השכרת הדירה לזרים.
בעלי הכנסה נאה ויציבה שיכולים להרשות לעצמם בית במעגל הראשון או השני של המטרופולין.
מתארחים בדירות בערים מקומיות או בערים בחו”ל.
פרסונה 3-מארחים ואורחים.
אמריקאים שנולדו בסין. הם ממוצא סיני ואוהבים את התרבות הסינית. מחבבים את Airbnb ומוכנים להשכיר דירה, ונהנים להתארח כשהם מטיילים.
פרסונה 4- בעלי מקצוע צעירים אשר מעולם לא שמעו על Airbnb ושוכרים דירה כדי לחיות בה.
מעולם לא שמעו על Airbnb או השתמשו בה, מגיעים בעיקר מהמעגל ה-3 של המטרופולין ומשתמשים בפלטפורמה צד 3 כדי להזמין מלונות וכו’. אין בבעלותם דירה לכן אינם מארחים, הם לא סומכים על זרים בשביל להשכיר להם דירה אך מוכנים להשתמש בפלטפורמה כדי להתארח מחוץ לסין.
פרסונה 5-בעלי מקצוע צעירים עם משפחות אשר בבעלותם דירה.
לא שמעו על Airbnb ולא השתמשו בה, אך מאחר והם בעלי דירות הם גמישים לרעיון ההשכרה לזרים עם הגבלים נוקשים.
האתר והממשק
 הכניסה לאתר מנותבת ישירות לאתר הסיני, והממשק דומה לממשק העולמי.
דף הבית אינו ממליץ על ערים סיניות מקומיות, יתרה מזו מציע הצעות ביפן קוראיה או תאילנד.
עולה התהייה מהמהלך הזה האם הם לא מעודדים סינים להתארח בערים מקומיות?
שיטות התחברות
בארה”ב ההתחברות נעשית דרך פייסבוק,דבר אשר נאסר בסין.
בסין ההתחברות נעשית ע”י רשתות חברתיות מקומיות, כמו WeChat המספקת חוויה נוחה ובטוחה ע”י QR קוד. דבר נפוץ מאוד בסין.
לוקאליזציה
שירות לקוחות מהווה צורך חשוב בסין ישנו מספר שפועל 24/7 בסינית.
תשלום
בחירה בשירותי תשלום צד 3 ללא עמלות העברה מהווה הוכחה להבנת השוק.בטחון
בטחון הוא עדיין נושא שקשה לגשת אליו בסין.  Airbnb הגדילו את מספר המשתמשים כשבחרו בשירות נפוץ המהווה מערכת קרדיט חברתית שעוזרת לבנות את האמון בין הסינים.

מקור:https://uxdesign.cc/user-research-airbnb-for-the-chinese-market-5ee21ce34bff