עיצוב שימושי לאתרי אינטרנט

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

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

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

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

ישנם 4 כללים עיקריים כאשר אנו מדברים על עיצוב אתרי אינטרנט שמיש: עקביות, פשטות, היררכיה ושימוש ברשת (Grid).

עקביות

עקביות היא חשובה מאד לשימושיות מהסיבות הבאות:

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

איך עושים את זה?

  1. הכנת ספר מותג לעיצוב כללי ולעיצוב האתר. מדובר במספר דפים מצומצם שמסביר איזו פלטת צבעים יש באתר, איך להשתמש בלוגו, הפונט וגודל הפונט שמשתמשים בו בחלקי האתר השונים וכל פרט שהוא שקשור לעיצוב. לא מדובר בספר עב כרס אלא ב2-5 דפים. כל מה שצריך לעשות זה לבקש אותם ממעצב אתרי האינטרנט שלך או מבונה האתרים. זה יכול לעלות עוד כמה שקלים אך זה חשוב ביותר.
  2. סטנדארטיזציה. שמירה על סטנדרטים מוכרים ברשת האינטרנט – הכוונה היא לקונוונציות העיצוב המוכרות – למשל חיפוש בחלק העליון של המסך או בבאנר הניווט, תפריט ניווט בצורת 'ר', עיצוב קישורים בצורה מובחנת עם קו תחתון, לוגו בחלק העליון של המסך ועוד אינספור קונוונציות שלא אפרט אותן כאן.
  3. פונקציונאליות מערכתית אחידה – הכוונה היא לניהול תהליכים באופן דומה באתר. אם יש לי כמה טפסי יצירת קשר באתר, אז כולם אמורים לעבוד באופן זהה. אם לחיצה על אתר חיצוני פותחת חלון חדש, אז כדאי שזה יהיה יקרה בכל פעם שאני לוחץ על קישור לאתר חיצוני. אם לחיצה על פריט בחלון החדשות פותחת אותו כ-popup, אז שזה יהיה אחיד בכל הפעמים וכך הלאה. זה נשמע די פשוט, אך זה דבר ש"מפיל" המון מתכנתי ובוני אתרי אינטרנט.

פשטות

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

איך עושים את זה?

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

היררכיה

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

איך עושים את זה?

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

שימוש ברשת (Grid)

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

עיצוב ישראל

פוסטים נוספים שכדאי לקרוא

בינה מלאכותית

Safeguards על מודל שפה גדול (LLM)

פוסט בשילוב עם פודקאסט וסרטון על ההגנות שאפשר להציב על LLM בסביבת פרודקשן

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

גלילה לראש העמוד