15 טיפים קטנים ל-UI מוצלח

  • post

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

גישה פשוטה למה שחשוב

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

לא לאמץ את המשתמש

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

עשה ואל תעשה

צמצמו את כמות הרעש

בכל פריט שהוא, יש את מה שחשוב, ויש “רעשי רקע”.
צמצמו את כמות רעשי הרקע למינימום – השאירו ב”פריים” רק את מה שחשוב באמת, ומה שניתן לוותר עליו, שיישמר לגולש שמתעניין בזה באמת.

השליכו לפח אלמנטים שאינם דרושים

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

נצלו לטובתכם כלים מתקדמים

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

ההתחברות לסטאמבלאפון

שמרו על פשטות

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

השתמשו באלמנטים מוכרים

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

500px-in

בלי ניחושים

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

500px

הדריכו את המשתמש

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

מסך התחברות

השקיעו בתוכן!

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

שמירה על אחידות

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

ארכיטקטורה נכונה

דאגו שהמערכת שלכם, עבור כל פעולה, לא תכיל יותר משבעה אלמנטים. למה הכוונה? אם יש לכם טופס – לא יותר מ:2-5 שדות אפשריים.
אל תתגרו בריכוז של המשתמשים שלכם, ואל תדרשו מהם לזכור או לקחת בחשבון יותר מדי פרמטרים.

התחברות לטאמבלר

הדגישו את הצעד הבא

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

זרימה

אל תמציאו גלגלים מחדש

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

כיף!

כשמגיעים למקום שלא רוצים להגיע אליו / לא אמורים להגיע אליו, פעולה שלא תוכננה כראוי (דוגמאות טובות הם עמודי 404 באתרים והודעות שגיאה באפליקציות)  – שמרו על עניין!
תגובה מצחיקה, מעוררת מחשבת, מושכת ומאתגרת תגרום למשתמש לא לנטוש את המערכת ולא “להתבאס” אפילו.
במקרה הגרוע ביותר – להישאר בעמוד עוד קצת, כאשר המטרה היא לשמור על רושם טוב ולייצר חוויה נעימה, גם בסיטואציות של חוסר מענה.

עמוד 404

לסיכום…

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

יש לכם טיפים נוספים? אשמח מאוד אם תשאירו תגובה ותשתפו אותי, אשמח לערוך ולהוסיף את הטיפים שלכם ואף לתת לכם קרדיט 🙂

הילה יונתן.

Comments

comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.