מהו ממשק משתמש?
ממשק משתמש (UI = User Interface) הוא דרך תקשורת שבעזרתה אנו "משוחחים" עם תוכנות מחשב – אנו מקיימים אינטראקציה עם אתר, תוכנה, משחק ועוד באמצעות סמלים גראפיים שונים ומחוונים ויזואליים כתפריט, כפתורים, אייקונים וכדומה.
התמצאות המשתמש בממשק הגראפי (GUI = Graphical User Interface) תלויה בשימושיות ונוחיות הממשק ובידידותיות המבנה והעיצוב. מטרתו הבסיסית של כל GUI היא לאפשר למשתמש בממשק לבצע פעולות יעילות, לשלוט בתוכנה, לקבל משוב ולהרגיש סיפוק מהשימוש במערכת, ולכן על הממשק להיות מתוכנן בהתאמה לדרך בה אנשים רגילים לתקשר עם העולם בכלל ועם תוכנות בפרט.
עיצוב ממשק משתמש נכון
ממשק משתמש טוב מתחשב במשתמש הפוטנציאלי ולא בארכיטקטורת המערכת מאחורי הקלעים. על ממשק משתמש להיות אינטואיטיבי, לוגי ובעל קומפוזיציה וויזואלית ברורה ואחידה, כדי שגם משתמשים ללא מיומנות יוכלו להתמצא בו בקלות, וכך חוויית המשתמש שלהם בממשק תהיה קלה, יעילה וחיובית.
שימושיות כמדד ליעילות הממשק
שביעות רצון המשתמש מהממשק היא הקו המנחה לכל עיצוב ממשק משתמש. על המשתמש למצוא את דרכו בממשק בקלות וללא מאמץ, משום שאנחנו לא רוצים שיהיה מתוסכל מהשימוש במערכת. על עיצוב ממשק משתמש להיות גם אטרקטיבי ומושך, כדי שחוויית המשתמש תהיה נעימה, והמשתמש ירצה לחזור לממשק שוב ושוב.
כדי שהממשק יהיה אפקטיבי ויעיל, על המידע להיות מוצג באופן ברור – כדי ליצור שימושיות העיצוב צריך להיות מכוון-משתמש, ויש לקחת בחשבון את מאפייניו הפיזיולוגיים והפסיכולוגיים של המשתמש, ולהתאים את הממשק לאופן החשיבה שלו, רמת הידע שלו, העדפותיו והרגלי צריכת המידע שלו. מאפיינים אלו עשויים להשתנות מקהל יעד אחד לאחר, ולעתים רצוי לבצע מחקר על קהל היעד כדי לבצע התאמות להעדפותיו הספציפיות ולארגונומיה ההכרתית* של קהל יעד זה. אך בין כל הקהלים יש דבר אחד בסיסי ומשותף – היותם בני אנוש הצורכים מידע בעולם שהרגיל אותם לדרך תקשורת גראפית מסוימת הכוללת דפוסי פעולה ברורים.
* ארגונומיה הכרתית: ארגונומיה (הנדסת אנוש) עוסקת בחקר יחסי הגומלין שבין בני האדם לסביבתם. ארגונומיה הכרתית כוללת חקר תהליכים ונושאים מחשבתיים כחשיבה וקבלת החלטות, זיכרון, תפיסה, מתח בעבודה, ממשק אדם-מחשב וכדומה – השפעתם על השילוב שבין האדם לבין רכיבים אחרים במערכת הארגונית, והתאמת סביבת העבודה לאנשים העוסקים באותה עבודה ספציפית.
תכנון ועיצוב חווית משתמש חיובית
על חשיבות חווית משתמש נכתבים, גם ברגעים אלו ממש, אלפי מאמרים המדגישים הלוך ושוב – על המשתמש במערכת לחוות חוויה חיובית ולהיות מסופק מהשימוש בממשק. מחקרים מראים כי חווית משתמש חיובית מובילה לעליה במחזור המכירות. על ממשק המשתמש במערכת, תהא היא מערכת ניהול, ממשק אתר אינטרנט או ממשק תוכנה כזו או אחרת, להיות מונחה משתמש לחלוטין – "המשתמש הוא המלך" ועליו לקבל את כל מה שחשקה בו נפשו, באופן מידי וברור.
עיצוב ממשק משתמש ידידותי תלוי במבנה פריסת הדף והבנה טובה של צרכי המשתמש במערכת. על הממשק להיות סימטרי, להבליט אזורים שחיוניים יותר למשתמש אך לתת לו למצוא גם את החיוניים פחות, וצריך לשמור על UI אחיד ועקבי לאורך כל ממשק התוכנה כדי שהמשתמש יוכל להתרגל לממשק ולהתמצא בו בקלות וחווית המשתמש עם המערכת תהיה חיובית.
טיפוגרפיה
על הגופן להיות נוח לקריאה מהירה – פונקציונליות ושימושיות תמיד עדיפות על יופי. את הטקסט יש 'לשבור' לפסקאות כדי שיהיה נוח לקריאה.
טקסט
על הטקסט להיות מיושר לימין או לשמאל (תלוי בשפת הממשק) – קשה לקרוא טקסט ממורכז ומומלץ להימנע מכך. מומלץ גם להימנע מקו תחתון עבור תוכן שאינו קליקבילי (לינק), משום שאנשים הורגלו כי טקסט עם קו תחתון הוא קישור, ולכן ינסו ללחוץ עליו.
מערכת הניווט באתר
על התפריטים להיות פרופורציונליים, וממוקמים באזורים אינטואיטיביים למשתמש ובאופן מסודר.
הנעה לפעולה
אם אנחנו מעוניינים שהמשתמש יבצע פעולה כלשהי בעת כניסתו למערכת או לאתר, עלינו להבליט את האזור באופן שיהיה ברור לגולש מה עליו לעשות ומדוע – ולהניע אותו לפעולה הרצויה.
צבעים
להקפיד על עיצוב גרפי מכוון שימושיות – על הצבעים לשרת את השימושיות בממשק ולא את העיצוב. בעת עיצוב ממשק משתמש יש לסדר את הנושאים והמסרים בסדר יורד לפי חשיבותם, ועל הצבעים לשרת מטרה זו ולהבליט את המסרים המרכזיים ביותר.
אלמנטים גרפיים
על האלמנטים הגרפיים בממשק כתפריטים, כפתורים, תיבות טקסט, אייקונים וסמלים גרפיים אחרים, להיות בעלי שפה חזותית אחידה ופונקציונליות ברורה ללא התנגשות עם התוכן. צריך להקפיד 'לדבר' באותה שפה ויזואלית של מיתוג עסק, כדי להתאים לזהותו הגראפית.
ממדים – רוחב וגובה
אם מדובר בתוכנה, עליה להתאים את ממדיה למסך המשתמש ולהתפרש על כל המסך ללא גלילה אורכית או רוחבית כדי להיות שימושית יותר – לא כדאי להחביא אלמנטים מעין המשתמש משום שאנשים לא רגילים להשתמש בגלילת דפדפן בתוך ממשק של תוכנת מחשב (גלילה פנימית היא בסדר גמור).
כאשר מדובר בעיצוב אתרים או דפי נחיתה, המצב קצת יותר מסובך.
כיום יש שפע של גדלי צג ושילובי רזולוציית מסך עד שכמעט בלתי אפשרי לעצב 'מידה אחת שמתאימה לכולם'. ישנן מערכות הפעלה רבות ושונות בשימוש, פלטפורמות משולבות בתוך מכשירים שונים, גלישה מבוססת מחשב לוח (טאבלט) שהפכה לפופולארית מאוד, ועוד ועוד.
למרות מעבר העולם לממשקים מותאמים סלולרי וטאבלטים, עדיין על כל המסרים החשובים להישאר ABOVE THE FOLD (השטח שרואה המשתמש מיד ללא גלילה אורכית). חשיבות 'האזור שמעל הקפל' נתמכת על ידי כלל "חמש השניות", אשר אומר כי משתמשים באתר מחליטים על טיב האתר והאם כדאי להם להישאר שם תוך חמש השניות הראשונות לביקורם.
'האזור שמעל הקפל' הוגדר בעבר כעד 600 פיקסלים גובה והוא חלק מהנושאים החמים עליהם יש מחלוקת בעולם העיצוב, בייחוד כיום. קשה מאוד לדחוס את כל תוכן ועיצוב האתר לתוך אזור של 600 פיקסלים גובה, וכניסתם של הטאבלטים לשוק מקטינה את האזור אף יותר (ויש שכבר הכריזו על 'מותו' של ABOVE THE FOLD). כיום כבר לא ניתן לדעת מהו הגובה המוגדר והחדש של אזור זה – וייתכן ובעוד כמה שנים המצב ישתנה שוב בהתאם לטכנולוגיות חדשות שייכנסו לשוק.
הפתרון הוא איזון – צריך למקם את המסרים המרכזיים באזור העליון ולשמור על סדרי חשיבות, ובכל מקרה כדאי להימנע מגלילה רוחבית משום שהיא לא אינטואיטיבית.
זמן תגובה
חוויית המשתמש מושפעת גם מזמן תגובת המערכת לפעולות שמבצע המשתמש. אם זמן התגובה איטי המשתמש ירגיש מתוסכל – ולכן כדאי לשמור על כתיבת קוד תקני ועל אחסון מתאים.
עזרה למשתמש
רצוי לשלב הודעות עזרה דביקות וקצרות כדי לעזור למשתמש להתחיל בשימוש במערכת וללוות אותו לאורך התהליך. דוגמה: ההודעות הדביקות בהן גוגל משתמש לאחר כל שדרוג בממשק המשתמש של Gmail עוזרות להבנת הממשק החדש ומפחיתות את חרדתם של משתמשים חדשים במערכת.
אלטרנטיבה לפתקיות הדביקות הן אייקונים גרפיים קטנים המספקים הסברים על אלמנטים ספציפיים.
הודעות משוב
המשתמש רוצה לדעת כי פעולותיו יביאו לתוצאות צפויות ולכן עליו לקבל משוב חזותי. אם הוא לחץ על כפתור כלשהו, הוא צריך להיות בטוח שמשהו הולך לקרות. צריך לספק משוב חזותי עבור כל אחת מהאינטראקציות של המשתמש, במיוחד אם קיים זמן טעינה.
הדבר חשוב במיוחד כאשר מדובר בהודעות אזהרה או שגיאה – עליהן להיות מובנות ולכלול הסבר על הפעולה הבאה שיש על המשתמש לבצע, ולא רק לרשום "שגיאה!" בלבד, להבהיל את המשתמש המסכן ולגרום לו לדאגה. חשוב לשמור גם על צבעים עקביים בהודעות, ולשמור על ההרגלים של אנשים בהקשרים של הצבעים לפונקציונליות מסוימת. הודעה על פעולות שבוצעו בהצלחה הן בדרך כלל בצבע ירוק, הודעות אזהרה הן בדרך כלל בצבע צהוב והודעות שגיאה הן אדומות.
רצוי להוסיף סמל גרפי קטן וייחודי לכל הודעה. סמלים מעבירים משמעות מידית ללא צורך בקריאה (חשבו על סימן קריאה בתוך משולש צהוב המסמל תמרור אזהרה). כמובן שכדאי גם לספק לאנשים דרך לסגירת ההודעה באופן ברור כדי שהם יוכלו לחזור לממשק.
עיצוב אלמנטים ומידע בהקשרים שונים
בעת עיצוב ממשק משתמש צריך לבחור במבנה המערכת המתאים ביותר לארגון המידע הנתון, ולתת תשומת לב לעיצוב האלמנטים בעלי ההקשרים השונים. אלמנט גרפי צריך ייחודיות ויזואלית כדי להבחין לא רק את החזות שלו מאלמנטים אחרים, אלא גם את הפונקציונליות השונה שלו.
למשל, בעת עיצוב ממשק משתמש למערכת ניהול, כפתור שהפונקציונליות שלו היא פתיחת תפריט נגלל לא יכול לקבל את אותה חזות גרפית כמו כפתור שמטרתו שליחת מידע. ההבחנה בין האלמנטים היא חשובה להבנת המשתמש את הממשק באופן ברור וללא טעויות. המשמעות של הכפתור צריכה להנחות את הגרפיקה ולא להפך.
ארכיטקטורת מידע – מבנה המערכת צריך להתאים לייעודה
תהליך זרימת המידע במערכת או באתר לאורך היררכיית הדפים צריך להיות פשוט ומובן, וללא הסחות דעת מיותרות – על המשתמש לאתר את המידע הרצוי לו בקלות ועל פי סדר חשיבות יורד.
עיצוב ממשק משתמש ותכנון ארכיטקטורת המידע עבור המערכת צריכים להתבצע לפי העדפות קהל היעד ולא לפי ההעדפות שלנו כמעצבים או בעלי עסקים. כדאי לערוך מחקר קצר (תלוי במורכבות המערכת) ולברר מה המשתמשים באמת צריכים, ולא לבסס את העיצוב על פי מה שאנחנו חושבים שהם צריכים – התפיסה שלנו את הצרכים שלהם יכולה להיות שונה מאוד מהצרכים האמתיים שלהם. ברגע שנדע מה המשתמשים שלנו צריכים, נוכל לתכנן ולעצב עבורם ארכיטקטורת מידע נוחה ושימושית.
מטרה ברורה
לכל מערכת יש מטרה – בין אם היא תהיה ניהול מידע, קבלת מידע או מכירת מוצר, על מטרה זו להיות ברורה ומובנת למשתמש. ארגון מבנה המערכת צריך להיות בקורלציה ישירה עם מטרת המערכת, וזרימת המידע מכל מקום צריכה להוביל אל אותה המטרה.
עקביות
עיצוב ממשק משתמש וארכיטקטורת מידע טובים נעשים על ידי שמירה על עקביות. חוסר עקביות מבלבל את המשתמשים במערכת משום שהם מצפים לעקביות – ולכן עלינו לספק להם אותה.
מבנה המערכת צריך לחזור על דפוס מסוים ללא חריגות, ואם ישנה חריגה מהדפוס בתת הקבוצות – גם על החריגה להיות עקבית עבור אותם אובייקטים המשתייכים לתת הקבוצה.
סוגים בסיסיים של ארכיטקטורת מידע
ישנם שני סוגים בסיסיים של ארכיטקטורת מידע: ארכיטקטורת מידע הזורמת מלמעלה למטה וזו הזורמת מלמטה למעלה. לפני שמתחילים בתכנון מבנה המערכת כדאי להסתכל על המערכת משני הכיוונים יחד כדי לראות אם יש פערים באופן ארגון המבנה, או לחילופין לשלב בין שני המודלים.
ארכיטקטורת 'מלמעלה למטה' – בעזרת מודל זה של ארכיטקטורת מידע יוצרים את מבנה הבסיס בעזרת סקירה רחבה של מטרות המערכת או האתר וצרכיו – ברמה הגבוהה, "מלמעלה". מרמה זו אנו "יורדים מטה" ונכנסים לעומק המערכת ובחינת שאר הדפים המשניים.
ארכיטקטורת 'מלמטה למעלה' – מודל זה מתחיל בבחינת מערכות היחסים והקשרים בין האובייקטים ברמת המיקרו ועושה דרכו מהתשתית מעלה דרך המערכת עד להגעה למטרה הגדולה.
סוגי מבנים של ממשק משתמש – תבניות של ארכיטקטורת מידע
מבנה דף יחיד
מודל עמוד יחיד מתאים למערכות או אתרים שמכילים כמות מאוד מוגבלת של מידע. למשל: אתר אינטרנט לאפליקציה, או אתר אישי פשוט.
מבנה שטוח
מתאים למערכת או אתר בהם כל הדפים נמצאים באותה הרמה, וכל דף הוא חשוב בדיוק כמשנהו. למשל: אתרי ברושור.
מבנה אינדקס
מבנה פופולרי המכיל דף ראשי ועמודי משנה, כאשר הדף הראשי הוא בעל החשיבות הרבה ביותר, והוא משמש כנקודת זינוק לכל העמודים האחרים במערכת.
מבנה היררכיה נוקשה
במבנה זה קיימים דף ראשי ודפי משנה בדומה למבנה האינדקס כאשר לכל דף משנה תתי דפים תחתיו, והקישורים לתתי הדפים מתבצעים מדף האב שלהם בלבד. אין גישה לדפי משנה מדפים מקבילים.
מבנה היררכי שיתופי
בדומה למבנה האינדקס ולמבנה הנוקשה, אך לדפי המשנה קיימת גישה מדפים מקבילים להם, ולתתי הדפים קיימת גישה מדפי משנה אחרים המקבילים לדפי האב שלהם.
יצירת אבטיפוס לבדיקת ארכיטקטורת המידע
על מנת שנוכל לחקור את התהליכים השונים בארכיטקטורת המידע שלנו, עלינו ליצור אבטיפוס פשוט אשר ידגים את התהליכים שיעבור המשתמש לאורך מערכת המידע, את אמצעי הניווט במערכת ואת הפונקציונליות בה ייעזר המשתמש בכל שלב.
אבטיפוס פשוט ניתן ליצור באמצעות תוכנת PowerPoint, למשל, כאשר לתוצאה הסופית קוראים בעגה המקצועית Mockup או Wireframe. בעת אפיון ממשק משתמש ניצור Mockup אשר על פיו נעצב בהמשך את ממשק המשתמש הגרפי למערכת.
ניתן ליצור אבטיפוס סטאטי (תמונות מערכת בלבד), וניתן ליצור אבטיפוס אינטראקטיבי המדמה פונקציונליות וכולל אינטראקציה של המשתמש עם הממשק והדמיה אמתית של תהליך הניווט במערכת.
כאשר המערכת היא מורכבת וכוללת פעולות רבות ומסובכות, כדאי לבצע הדמיה אינטראקטיבית כדי שנוכל לבצע בקרת איכות, לבחון ולפתור בעיות שעלולות לצוץ בעת השימוש במערכת, לשנות מיקומים של אובייקטים שונים או אף להוסיף מסכים. עלינו לעבור את אותו התהליך אותו יעבור המשתמש במערכת כדי שנוכל ליצור עבורו מערכת שימושית, יעילה וקלה לתפעול אינטואיטיבי. לעתים יצירת אבטיפוס תשנה את דרך החשיבה שלנו ותעזור לנו להקל את השימוש במערכת וליצור חוויית משתמש חיובית יותר.
GUI שימושי, נוח ואסתטי הוא חלומו של כל משתמש
עיצוב ממשק משתמש לא כולל רק אסתטיקה וגרפיקה יפה, אלא גם חוויית משתמש נוחה ומספקת. ממשקים נקיים וממוקדים בהם המשתמש יכול לבצע פעולות בקלות ובמהירות, הם ממשקים מוצלחים ושימושיים – ואנשים אוהבים לבלות את זמנם בממשקים כאלו, משום שהם יכולים להפיק מהם תועלת מקסימלית ולהשיג את מטרתם.
נשמח לעצב עבורכם ממשק משתמש אינטואיטיבי ויעיל, שישרת את קהל היעד שלכם על הצד הטוב ביותר ויעניק לו חווית משתמש חיובית ומספקת – פנו אלינו למידע נוסף ולכל שאלה.
מאחלים לכם הצלחה רבה,
סטודיו jolini – צוות שאוהב ממשקי משתמש יפים, שימושיים וחכמים.
