-
עיצוב חזותי - הסיפור האמיתי
מרבית ממשקי המשתמש למערכות מידע ואתרי אינטרנט עוברים תהליך של עיצוב גרפי, אך אינם זוכים לעבור תכנון ממוקד משתמש (User-Centered Design). המפתח לממשק משתמש מוצלח, שהשימושיות שלו (Usability) אינה נופלת מהעיצוב הגרפי שלו, הוא תכנון מקצועי לפני העיצוב הגרפי. המאמר מסביר מדוע תכנון מאולתר של מעצב גרפי אינו מספיק, אילו עקרונות צריכים להנחות עיצוב חזותי של ממשק, וכיצד ליישם את העקרונות האלה לעיצוב ממשק משתמש מעולה.
המאמר נכתב על ידי מומחי חווית המשתמש בחברת TZUR – UX Designבין עיצוב גרפי לתכנון ממוקד משתמש
מעצבים גרפיים, שאינם בעלי ההשכלה, הניסיון והרגישות ההכרחיים לעיצוב ממשק משתמש, נוטים לגשת לעיצוב הממשק מכיוון של אמנות. המדדים לאיכות הממשק מנקודת מבטם, הינם הבעה עצמית, ייחודיות, גימיקים מקוריים ואטרקציות גרפיות. מדדים אלה, אינם עולים בקנה אחד עם ההנחה הבסיסית: ממשק המשתמש נועד... למשתמש!
עיצוב גרפי של ממשק משתמש חייב להיות מונע על ידי שיקולים פסיכולוגיים וקוגניטיביים. בבואו לעצב את ממשק המשתמש, על המעצב הגרפי להתחשב בגורמים האנושיים של משתמשי המערכת ולזכור לאורך כל הדרך כי המדד האמיתי לאיכות הממשק הוא התאמתו המלאה למשתמשים.
אינטראקצית אדם-מחשב נחקרה רבות, ומסקנות חד משמעיות הופקו באופן מדעי. במטרה לקיים אינטראקציה מוצלחת בין המשתמש למערכת המידע, חשוב להקפיד תמיד על קיומם של מספר כללים בסיסיים. בשונה מאמנות, עיצוב ממשק נכון מצטיין בהתאמה לאופיו האנושי של המשתמש, ולא במקוריות המדברת רק לבודדים.
עקרונות-על כלליים
במהותו העמוקה ביותר, ממשק המשתמש נועד להקל על המשתמש להגשים את מטרותיו. לכן, חשוב כי העיצוב הגרפי ישמור על העקרונות אשר מקלים על המשתמשים את השימוש במערכת המידע:- עקביות (Consistency): זיהוי תבניות הוא אחת המיומנויות היסודיות ביותר בהן בני אדם מצטיינים. באופן בלתי מודע, כל משתמש בונה לעצמו דגם מחשבתי של המערכת (כספומט, אתר אינטרנט, תוכנת מחשב) עמה הוא מקיים אינטראקציה. ממשקים עקביים עוזרים מאד להתמצאות, לניווט אינטואיטיבי, וליצירת תחושה טובה אצל המשתמש. עלינו לגייס לטובתנו את הנטייה הטבעית של אנשים לחפש סדר ועקביות ולזכור זאת בעת עיצוב הממשק.
- ארגונומיה (Ergonomics): בני אנוש מתאפיינים בתכונות פיזיולוגיות כגון יכולת ראייה והבחנה, מהירות תגובה, ורגישות או העדר רגישות לצבעים מסוימים. ממשק משתמש הוא "מוצר" שמשתמשיו ידועים מראש - בני אדם. כפי שגובהו של מושב הכסא חייב להתאים לגובהו של אדם ממוצע, כך בחירות עיצוביות כמו גודל הגופן (font) חייבות להתאים ליכולת הראיה האנושית.
- מוסכמות והקשרים תרבותיים (Cultural Connotations and Conventions): ערכים מסוימים מעוגנים עמוק בתת-מודע הקולקטיבי של בני האדם. ערכים אלה משתנים לעתים בין תרבויות. כך לדוגמה, בסין מסומן הדרום באדום, ואילו ביוון דווקא הצפון מסומן באדום. למרבה המזל, מרבית הממשקים אינם מיועדים לקהל עולמי, ולכן עלינו לשמור על קונוטציות תרבותיות המתאימות למיקומנו הגיאוגרפי. כדאי להכיר את המוסכמות הללו ולנצל את כוחן הרב לטובתנו, במקום שיעבדו נגדנו. דוגמה נוספת היא משמעותן של צורות וצבעים: עיגול מסמל תנועה, המשכיות; ריבוע מסמל יציבות, ממלכתיות; משולש מסמל התקדמות, אזהרה; אדום מסמל עצירה, סכנה, חום; ירוק מסמל חיים, תנועה, טבע; כחול מסמל רקע, שקט, קור; צהוב מסמל סכנה, תשומת לב; כתום מסמל חדשנות; אפור מתקשר למתכת, טכנולוגיה, היי-טק.
שלושת עקרונות העל מקבילים לשלושת היסודות האנושיים החשובים: העקביות נחוצה לתבונה וליכולת האנליטית של המוח, הארגונומיה נחוצה למגבלות הגוף, וההקשרים התרבותיים פועלים בעיקר במישור הרגשי.
יישום עקרונות העל בתהליך העיצוב הגרפי
מעצב גרפי של ממשק משתמש חייב ליישם את עקרונות-העל הכלליים האלה בכל בחירה עיצובית שלו בתהליך העיצוב, מפני שהעקרונות הללו מאפיינים את יעד העיצוב כולו - המשתמש. כל אחד מעקרונות העל צריך להיות מיושם ברמת המיקרו, בכל החלטה עיצובית, קטנה ככל שתהיה. להלן מספר דוגמאות ליישומם של עקרונות העל בתהליך העיצוב הגרפי:- מבנה הדף (Layout): קומפוזיציה, מרחק בין אלמנטים והיחסים המרחביים ביניהם, יישור (alignment), חלוקת הדף לאזורים פונקציונליים, קיבוץ אלמנטים לקבוצות לפי פונקציונליות או משמעות, והגודל היחסי של השטח המוקצב לכל אלמנט:
- מבנה הדף צריך לשמור על עקביות ואחידות בין מסכי המערכת (דפי האתר, מבטי היישום), ולכן מצריך תכנון קפדני, כדי להתאים לפונקציות השונות הקיימות לאורכה ולרוחבה של מערכת המידע
- על המבנה להתאים לקונוטציות תרבותיות מוסכמות כגון כותרות גדולות ובולטות, תוכן במרכז וניווט בשוליים
- השיקול הארגונומי בא לידי ביטוי במיוחד בהקפדה על השארת מרחק (space) מספיק בין האלמנטים. העיניים זקוקות לרווח כמו אויר לנשימה - הרווח מונע תחושת עומס ומקל על ההתמצאות והקריאות
כדי לבחון את מבנה הדף צמצם/י את עיניך מול המסך (או טשטש/י את המראה הכללי באופן אחר) - האם המסך עדיין מאוזן? האם האזורים שצריכים לבלוט בולטים? האם ניכר סדר או אי-סדר? האם אלמנט משני מושך תשומת לב רבה מידי?
- צבעוניות (Color Scheme):
- שמירה על קונוטציות נכונות תתבטא בבחירת צבעים מושכלת ולא מקרית, בחירה שתבטא את האווירה שהמערכת מנסה להשרות ולא בחירה שרירותית לפי טעמו הסגנוני של המעצב הגרפי
- צבע מהווה מנחה מרכזי למשתמש, ולכן עקביות צבעונית ברחבי המערכת היא בעלת חשיבות מהמדרגה הראשונה: צבע אחיד לקישורים, לטקסט, לאזור הניווט, וכדומה
- מבחינה ארגונומית על המעצב הגרפי להגביל את עצמו למספר צבעים מצומצם: 2-3 צבעים בסיסיים לכל היותר, בתוספת וריאציות על אותם הצבעים. אין להציב זה ליד זה את צירופי הצבעים אדום/ירוק, סגול/כחול ואדום/כחול, מפני שהם יוצרים חוסר שקט במנגנון הראיה האנושית.
בכל מקרה, אין להסתמך על הצבעים לבדם - כדי לבדוק זאת, חשוב לצפות בסקיצת המערכת בשחור/לבן: האם מבנה הדף, ההיררכיה, והניווט עדיין ברורים?
- טיפוגרפיה (Typography): סוג וגודל גופני טקסט (font), כותרות, הדגשות, ריווחים ושוליים:
- גופנים סריפיים (serif, בעלי קצוות שפיציים או "זנבות", כמו Times) קלים יותר לקריאה מהדף המודפס, בגדלים קטנים יחסית, ומתאימים יותר לטקסטים. גופנים שאינם סריפיים (sans-serif, בעלי קצוות ישרים, כמו Arial) קלים יותר לקריאה מהמסך ומתאימים יותר לכותרות ולגדלים היותר גדולים
- הגופן (typeface) צריך להיות מותאם לאופי המערכת, המוצר, התוכן או המסר. סוג הגופן המדויק משדר מסר תת-מודע אך רב עוצמה,
- בדומה למוזיקת רקע. לכן, הבחירה צריכה להתייחס לקונוטציה התרבותית אליה הגופן מתקשר: האם הגופן צעיר? דינמי? ממלכתי? כבד? היי-טקי?
- גודל הגופן - מעצבים גרפיים נוטים לחבב גופנים קטנים, אך משיקולים ארגונומיים אין לרדת מגודל 10 נקודות ברוב המקרים
- ההירארכיה בין הכותרות הראשיות וכותרות המשנה צריכה להתבטא בגודלן ו/או בצורתן
- משיקולי קריאות, לעולם אין למקם טקסט צבעוני על רקע צבעוני. לפחות אחד מהללו חייב להיות שחור או לבן, במטרה ליצור ניגודיות (contrast) גבוהה מספיק לקריאה נוחה
מחקרים רבים הראו כי השילוב הקריא ביותר לטקסט על מסך הוא גופן אריאל בגודל 12 נקודות, צבע כהה מאד על רקע בהיר מאד, ללא הדגשות והטיות, עם ריווח של שורה וחצי ושוליים רחבים מסביב - כל סטייה מהשילוב הזה תבוא על חשבון הקריאות ולכן צריכה להיות מוצדקת בסיבות טובות.
- אובייקטים גרפיים: קווים, צורות, משטחי צבע, אנימציה, דימויים, אייקונים וכדומה. אין מניעה להוסיף למערכת אלמנטים קישוטיים כל עוד הם אינם חורגים מכללי מבנה הדף שהוטוו ואינם מפרים את האיזון הצבעוני שהוזכר. האופנה כיום נוטה לכיוון עיצוב חלק וחללי, כלומר שימוש מועט בטקסטורות (אם בכלל). שימוש זהיר בטקסטורה עדינה יכול להוסיף מגע של איכות במקרים מסוימים. שימוש נכון בחלק מהמרכיבים האלה יכול להוסיף המון לחווית המשתמש, אך אם הם פוגעים באחד מעקרונות העל - הנזק שלהם רב בהרבה מהתועלת.
עיצוב גרפי כחלק מתהליך תכנון הממשק
כאמור, מאמר זה מציג קווים מנחים כלליים בלבד, המשאירים חופש רב לטעמו של המעצב הגרפי. יחד עם זאת, מאחר ומדובר בממשק משתמש, חובה על המעצב להפעיל שיקול דעת ולקבל עליו את המגבלות הללו, כדי להימנע ככל שניתן מפגיעה בשימושיות הממשק.
השלב הראשון בבניית ממשק משתמש מוצלח הוא תכנון מפורט של ממשק המשתמש, המתבצע על ידי מומחה בתחום של תכנון ממוקד משתמש (User-Centered Design). בסופו של תהליך התכנון מתקבל אב-טיפוס מפורט של ממשק המשתמש, המאפיין את כל הממשק מרמת המבנה ועד לפרטים הקטנים ביותר.
התכנון המפורט מקל על עבודתו של המעצב, מונע שגיאות שימושיות מצדו ומאפשר לו להתרכז בעיצוב הגרפי עצמו. המעצב הגרפי מכין תבנית מסך אחד (או מספר מסכים מייצגים) על בסיס התכנון המפורט, אשר עונה לכל הדרישות, קרי קומפוזיציה מובנת, הרמוניה צבעונית, טקסטים קריאים, אמצעי ניווט פשוטים, וכדומה. לאחר שמוודאים שעקרונות העל נשמרים בכל פרט, מפיקים מהתבנית מדריך סגנונות הקובע לפרטי פרטים את חוקי העיצוב לגבי כל המסכים באותה מערכת.
הנה רשימת תארים חיוביים בהקשר של עיצוב: השראה, מקוריות, חדשנות. כל מעצב גרפי היה שמח לקבל מחמאות כאלה - אולם התארים הללו אינם מתאימים לעיצוב ממשק משתמש. עיצוב מעולה של ממשק משתמש יזכה לתיאור: עקבי, ארגונומי, ברור, פשוט, אינטואיטיבי, נעים- וכל זאת, מבלי לוותר על: חוויתי, יעיל, שיווקי. המשתמש יעריך תכונות אלה הרבה יותר מחדשנות גרפית.
כל הזכויות במאמרים אלה שמורות לחברת TZUR – UX Design. אין להעתיק, לשכפל, לצטט או לעשות כל שימוש שהוא בתוכן המאמר, ללא אישור מפורש בכתב מחברת TZUR – UX Design
מחפשים חברת UX/UI מעולה?
אנו מומחי UX/UI למערכות מורכבות, אתרים ואפליקציות, שחיים ונושמים חווית משתמש כבר למעלה מ-20 שנים וזמינים לכל פרוייקט, אתגר או משימת UX/UI.
