מזה GUI ומהם 3 הכללים הראשונים לעיצוב מוצלח – טיפים לעיצוב ממשקים

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

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



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

מזה GUI ומהם 3 הכללים הראשונים לעיצוב מוצלח – טיפים לעיצוב ממשקים

  • 1. חלוקת תצוגה ומציאת מיקומי
  • 2. ניווט נוח אל המטרה
  • 3. מידע פשוט להבנה

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



1. חלוקת מסך ומציאת מיקומים

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

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

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




what_is_gui_3_first_rules_01

2. ניווט נוח אל המטרה

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

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

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

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




what_is_gui_3_first_rules_02

 3. מידע פשוט להבנה

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

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

what_is_gui_3_first_rules_03

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



4 תגובות על “מזה GUI ומהם 3 הכללים הראשונים לעיצוב מוצלח – טיפים לעיצוב ממשקים

  • 11/02/2014 at 20:47
    Permalink

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

    Reply
    • המעצב
      13/05/2014 at 14:40
      Permalink

      בבקשה :)

      Reply
  • 24/10/2016 at 12:07
    Permalink

    שאפו ענק !
    נהנת מכל פוסט !

    Reply
  • 21/10/2018 at 10:31
    Permalink

    אשמח לקרוא פוסטים נוספים בנושאים אלו – UX/UI/GUI

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *