אין ספק, הכישרון מתבטא מהר מאוד בעזרת תוכנות העריכה הגרפיות השונות, אם זו התוכנה Photoshop המפורסמת של Adobe, או Jimp המיועד למשתמשי לינוקס המתרבים, אך האם הכשרון הגרפי מספיק בכדי לעצב אתר?
תשובה מהירה לשאלה הזו היא "לא", מלבד ידע בתוכנות עריכה גרפיים דרוש גם ידע בעיצוב אתרים, ורק לאחרונה מצאתי את עצמי עומד מול עיצוב של מעצב מוכשר ללא ספק, שימוש נכון בתוכנת העריכה הגרפית וטעם אישי משובח, אבל שום הבנה בכל הנוגע לאתרים באינטרנט, דבר שפגע מאוד בעיצובים, וכמה שהם יכולים להיות יפים, הם לא היו שווים את המחיר בגלל החוסר תמורה שמקבלים מהם.
כמובן שהבעיה שהצגתי היא לא חסרת פתרון, ולמעשה כל מה שעליהם לעשות הוא לעקוב אחרי קווים מנחים, כאשר את העיקר עושים הרבה לפני שפותחים את תוכנת העריכה ומתחילים לעבוד.
הקווים המנחים מאפשרים לעבוד נכון, חלקם יכולים להתבצע על ידי הלקוח, אבל לעיתים עליהם להתבצע דווקא על ידי המעצב, שמראה עבודות שונות שטרם נמכרו, ורוצה להרוויח את לחמו.
המשתמש במרכז
הדבר החשוב ביותר להבין הוא שהמשתמש במרכז, חשיבה לאורך העיצוב על המשתמש תוציא את המקסימום מהאתר, מהסיבה הפשוטה שהאתר מיועד לגולשים, וחשיבה עליהם מראש, על פעולותיהם ועל הדברים שאותם הם מבצעים באתר, יביאו את המשתמשים באתר להוציא את המקסימום מהיכולות והתכונות אותן האתר מציע.
חשיבה על המוצר בלבד, או ניסיון להתעלם מהמשתמשים עלול לפגוע משמעותית ביכולות אותן האתר מציע, ובמקום שמשתמשים יקבלו את מה שהאתר רוצה להציע, הם יתקלו בחווית משתמש רעועה או לא שלמה, ויבחרו לנסות באתר אחר את מזלם.
קהל היעד שלכם
גם את השיקול הזה בחרתי להוציא מהנקודות המנחות, מהסיבה הפשוטה שהוא מלווה אותכם לאורך כל התהליך, וקהל היעד הוא זה שיכתיב לכם האם למקם אלמנט מסוים בראש הדף או באמצע.
קהל יעד מבוגר יעדיף כתב גדול, ופחות תוכן מאשר קהל יעד של בני נוער, שיכול להתמודד עם כמות תוכן גדולה וכתב יותר קטן, ואף לא להתייחס לפרסומות הקופצות מידי פעם במהלך הגלישה.
הכרות עם קהל היעד, טווח הגילאים, מה קהל היעד מעדיף וכמות הניסיון שלו עם האינטרנט תביא אותכם לבחירה הנכונה ביותר עבור האתר, ולכך שהמשתמשים ישתמשו באתר ויוכלו לקבל חווית משתמש שלמה.
שלב ראשון - מול מי אני עובד?
אני חושב שזו השאלה הראשונה והחשובה ביותר, מול מי אני עובד, שאלה שמובילה אותנו לחשיבה על הלקוח שלנו במידה ויש כזה, כאשר במידה ויש אנו נבקש ממנו לבוא עם אפיון של האתר, ועם הדגשים שהוא רוצה באתר, ורק אז נסכים לעצב.
חשוב מאוד שהלקוח הוא זה שיביא את האפיון, אחרי שעבר עליו עם בנאדם פרטי או חברה המבינים בתחום, וזאת בשביל לחסוך שינויים עתידיים בעיצוב ועלויות בלתי צפויות בשל שינוי קריטי בעיצוב.
במידה ולא עובדים מול לקוח, כל תהליך האפיון נופל על כתפיו של המעצב, שכעת צריך לחשוב כמו הלקוח וליצור אפיון לאתר.
שלב שני -חקירה
השלב הזה נועד למעצבים שמתכננים להכין עיצוב למכירה, וכדי להראות את הצורך בו תשאלו את עצמכם (המעצבים): כמה פעמים לפני שהתחלתם לעצב בדקתם בכלל איזה מידע רלוונטי לאתר מהסוג אותו אתם מעצבים ובאמת חשבתם על איך למקם אותו?
לא פעם אחת גיליתי חברת אירוח אתרים, שהצעות המחיר שלה והשירות אותו היא מציעה מופיעים בחלק התחתון של הדף, כאשר זה היה העיקר, או שראיתי תוכן שנמצא בחלק הכי עליון של הדף, אבל זאת כאשר אחריו יש לוגו שגורם לאותו אזור להיות "מת" ולא בר הסתכלות, לא חבל על התוכן שיופיע שם?
שלב החקירה חשוב כי הוא עוזר להבין מה צריך להופיע בעיצוב ואיך, אם מדובר באתר בריאות, האם שידור אמינות וטקסט הנוגע לזה אמור להיות גדול? האם יש צורך ביצירת הרשמה והתחברות גדולים לשירות? ואיפה לשים את השירות אותו האתר מציע?
כל השאלות האלו נענות במהלך הבדיקה של מה דרוש לאתר, וכמה הוא מרכזי.
שלב שלישי - אפיון
באפיון לאחר חקירה של מה שדרוש נמקם את האלמנטים בצורה הגיונית, כאשר אלמנטים יותר רלוונטיים יופיעו למעלה, ואילו אלמנטים שפחות עוסקים בנושא הדף ימוקמו יותר למטה.
מיקום האלמנטים וחלוקת הדף יקבעו בהמשך את מבנה העיצוב, כאשר לצד שיקולים אלו נכנסים שיקולי שימושיות כמו הנוחות של התפריט, האם להשתמש במעל 4 אלמנטים באזור מסוים (פוגע במהירות בה הגולש הממוצע קולט את האלמנטים), ושיקולי שימושיות נוספים.
באפיון יש דגש על מיקום האלמנטים, וכיצד הדבר משפיע על המשתמש, כאשר אם אני אצור תפריט בחלק הכי עליון של הדף, אחריו לוגו ארוך של האתר, ולאחר מכן התוכן, הגעה לתפריט תהיה תהליך מייאש, כי הוא נמצא במקום שהגולשים לא בהכרח מסתכלים אליו, והגעה לאזור כרוכה במעבר מעל לוגו ארוך שיוצר מחיצה בין התוכן לתפריט.
שימו לב שבאפיון ניתן להביא לידי ביטוי מבנה אתר מהפכני וחדש, או לחזור על נוסחה מוצלחת שראיתם, כאשר השימושיות באחד והשני מהאחר יכולים להשפיע על כמות הגולשים באתר בצורה ניכרת.
שלב רביעי - בחירת צבעים ומבנה
בשלב הזה יש לנו מבנה כללי לאתר, וחריגות ממנו יעשו רק בהתאם למבנה שנקבע (האם הלוגו נכנס ברמה של הקישורים לדוגמה או שהקישורים יהיה בתפריט מתחת לאזור הלוגו).
בחירת מבנה השונה במקצת מהאפיון שיש היא בהסכמת הלקוח, ובנוסף שהמבנה החדש לא פוגע בחווית המשתמש או ביכולות אותן הוא יכול להוציא מהאתר.
חשוב לשים בשלב זה דגש על המוצר, מה הוא אמור לשדר, והאם העיצוב והמבנה מתאימים למותג שמפרסם האתר.
לדוגמה עבור אתר גאדג'טים הרבה פעמים הולכים על עיצוב שחור אם מראה "חדשני", ועבור אתר בריאות נבחר בירוק כדי לשדר שזה הנושא בו עוסק האתר.
לבחירת הצבעים בהתאם למוצר יש משמעות רבה, כנ"ל לגבי המבנה, אם מדובר באתר שאמור להיות חדשני, גם המבנה אמור להיות כזה, כמובן בכפוף לשיקולים הנוגעים לשמישות האתר בעיני המשתמש.
שלב חמישי - העיצוב
יש מבנה, יש צבעים, יש תוכן והמיקום שלו, כעת מה שנשאר הוא לצקת הכל לתוכנת העריכה הגרפית, ולהביא לידי ביטוי את היכולות הגרפיות שלכם, אך לא פה נגמרה העבודה.
בשלב העיצוב בא לידי ביטוי החלטות הנוגעות למבנה, לדוגמה קבענו כין בין התוכן של בלוק מסוים לאחר יש רווח מוגדר, אנו לא נשים תמונה ששוברת את הרווח שנקבע, גם אם זה יהיה הכי מושלם בעולם, קבענו רווח מסוים ואנו נשמור עליו ולא נשבור אותו לאורך כל העיצוב.
בנוסף אם חילקנו למספר טורים את התוכן, רצוי שכל בלוק של תוכן יהיה זהה ברווח לזה שלידו, זה יקל על המשתמשים ויעלה ברמה את העיצוב.
הרווח בין כל בלוק של טקסט, או לבלוק לידם יהיה קבוע, ובכך אנו נשמור על עיצוב מאוזן וחוזר על עצמו, דבר היקל על המשתמשים.
הקווים המנחים של העיצוב
אני חושב שנגעתי במאמר בקווים מנחים הנוגעים לעיצוב אתר, החל מתהליך החקר, ועד לתהליך יצירת העיצוב.
אני ממליץ להרחיב בנושא השימושיות כדי לקבל הבנה יותר טובה על מבנה האתר והשפעה של החלטות שונות על המשתמש, וכדי להבין את צד הלקוח טוב יותר.
כהתחלה אני ממליץ לקרוא את הפוסט להגיע לאפיון הנכון (Netcraft) שעוסק ביצירת אפיון בדרכים שונות, ובין היתר מתייחס ללקוח במהלך האפיון.
המשך עיצוב נעים.
תשובה מהירה לשאלה הזו היא "לא", מלבד ידע בתוכנות עריכה גרפיים דרוש גם ידע בעיצוב אתרים, ורק לאחרונה מצאתי את עצמי עומד מול עיצוב של מעצב מוכשר ללא ספק, שימוש נכון בתוכנת העריכה הגרפית וטעם אישי משובח, אבל שום הבנה בכל הנוגע לאתרים באינטרנט, דבר שפגע מאוד בעיצובים, וכמה שהם יכולים להיות יפים, הם לא היו שווים את המחיר בגלל החוסר תמורה שמקבלים מהם.
כמובן שהבעיה שהצגתי היא לא חסרת פתרון, ולמעשה כל מה שעליהם לעשות הוא לעקוב אחרי קווים מנחים, כאשר את העיקר עושים הרבה לפני שפותחים את תוכנת העריכה ומתחילים לעבוד.
הקווים המנחים מאפשרים לעבוד נכון, חלקם יכולים להתבצע על ידי הלקוח, אבל לעיתים עליהם להתבצע דווקא על ידי המעצב, שמראה עבודות שונות שטרם נמכרו, ורוצה להרוויח את לחמו.
המשתמש במרכז
הדבר החשוב ביותר להבין הוא שהמשתמש במרכז, חשיבה לאורך העיצוב על המשתמש תוציא את המקסימום מהאתר, מהסיבה הפשוטה שהאתר מיועד לגולשים, וחשיבה עליהם מראש, על פעולותיהם ועל הדברים שאותם הם מבצעים באתר, יביאו את המשתמשים באתר להוציא את המקסימום מהיכולות והתכונות אותן האתר מציע.
חשיבה על המוצר בלבד, או ניסיון להתעלם מהמשתמשים עלול לפגוע משמעותית ביכולות אותן האתר מציע, ובמקום שמשתמשים יקבלו את מה שהאתר רוצה להציע, הם יתקלו בחווית משתמש רעועה או לא שלמה, ויבחרו לנסות באתר אחר את מזלם.
קהל היעד שלכם
גם את השיקול הזה בחרתי להוציא מהנקודות המנחות, מהסיבה הפשוטה שהוא מלווה אותכם לאורך כל התהליך, וקהל היעד הוא זה שיכתיב לכם האם למקם אלמנט מסוים בראש הדף או באמצע.
קהל יעד מבוגר יעדיף כתב גדול, ופחות תוכן מאשר קהל יעד של בני נוער, שיכול להתמודד עם כמות תוכן גדולה וכתב יותר קטן, ואף לא להתייחס לפרסומות הקופצות מידי פעם במהלך הגלישה.
הכרות עם קהל היעד, טווח הגילאים, מה קהל היעד מעדיף וכמות הניסיון שלו עם האינטרנט תביא אותכם לבחירה הנכונה ביותר עבור האתר, ולכך שהמשתמשים ישתמשו באתר ויוכלו לקבל חווית משתמש שלמה.
שלב ראשון - מול מי אני עובד?
אני חושב שזו השאלה הראשונה והחשובה ביותר, מול מי אני עובד, שאלה שמובילה אותנו לחשיבה על הלקוח שלנו במידה ויש כזה, כאשר במידה ויש אנו נבקש ממנו לבוא עם אפיון של האתר, ועם הדגשים שהוא רוצה באתר, ורק אז נסכים לעצב.
חשוב מאוד שהלקוח הוא זה שיביא את האפיון, אחרי שעבר עליו עם בנאדם פרטי או חברה המבינים בתחום, וזאת בשביל לחסוך שינויים עתידיים בעיצוב ועלויות בלתי צפויות בשל שינוי קריטי בעיצוב.
במידה ולא עובדים מול לקוח, כל תהליך האפיון נופל על כתפיו של המעצב, שכעת צריך לחשוב כמו הלקוח וליצור אפיון לאתר.
שלב שני -חקירה
השלב הזה נועד למעצבים שמתכננים להכין עיצוב למכירה, וכדי להראות את הצורך בו תשאלו את עצמכם (המעצבים): כמה פעמים לפני שהתחלתם לעצב בדקתם בכלל איזה מידע רלוונטי לאתר מהסוג אותו אתם מעצבים ובאמת חשבתם על איך למקם אותו?
לא פעם אחת גיליתי חברת אירוח אתרים, שהצעות המחיר שלה והשירות אותו היא מציעה מופיעים בחלק התחתון של הדף, כאשר זה היה העיקר, או שראיתי תוכן שנמצא בחלק הכי עליון של הדף, אבל זאת כאשר אחריו יש לוגו שגורם לאותו אזור להיות "מת" ולא בר הסתכלות, לא חבל על התוכן שיופיע שם?
שלב החקירה חשוב כי הוא עוזר להבין מה צריך להופיע בעיצוב ואיך, אם מדובר באתר בריאות, האם שידור אמינות וטקסט הנוגע לזה אמור להיות גדול? האם יש צורך ביצירת הרשמה והתחברות גדולים לשירות? ואיפה לשים את השירות אותו האתר מציע?
כל השאלות האלו נענות במהלך הבדיקה של מה דרוש לאתר, וכמה הוא מרכזי.
שלב שלישי - אפיון
באפיון לאחר חקירה של מה שדרוש נמקם את האלמנטים בצורה הגיונית, כאשר אלמנטים יותר רלוונטיים יופיעו למעלה, ואילו אלמנטים שפחות עוסקים בנושא הדף ימוקמו יותר למטה.
מיקום האלמנטים וחלוקת הדף יקבעו בהמשך את מבנה העיצוב, כאשר לצד שיקולים אלו נכנסים שיקולי שימושיות כמו הנוחות של התפריט, האם להשתמש במעל 4 אלמנטים באזור מסוים (פוגע במהירות בה הגולש הממוצע קולט את האלמנטים), ושיקולי שימושיות נוספים.
באפיון יש דגש על מיקום האלמנטים, וכיצד הדבר משפיע על המשתמש, כאשר אם אני אצור תפריט בחלק הכי עליון של הדף, אחריו לוגו ארוך של האתר, ולאחר מכן התוכן, הגעה לתפריט תהיה תהליך מייאש, כי הוא נמצא במקום שהגולשים לא בהכרח מסתכלים אליו, והגעה לאזור כרוכה במעבר מעל לוגו ארוך שיוצר מחיצה בין התוכן לתפריט.
שימו לב שבאפיון ניתן להביא לידי ביטוי מבנה אתר מהפכני וחדש, או לחזור על נוסחה מוצלחת שראיתם, כאשר השימושיות באחד והשני מהאחר יכולים להשפיע על כמות הגולשים באתר בצורה ניכרת.
שלב רביעי - בחירת צבעים ומבנה
בשלב הזה יש לנו מבנה כללי לאתר, וחריגות ממנו יעשו רק בהתאם למבנה שנקבע (האם הלוגו נכנס ברמה של הקישורים לדוגמה או שהקישורים יהיה בתפריט מתחת לאזור הלוגו).
בחירת מבנה השונה במקצת מהאפיון שיש היא בהסכמת הלקוח, ובנוסף שהמבנה החדש לא פוגע בחווית המשתמש או ביכולות אותן הוא יכול להוציא מהאתר.
חשוב לשים בשלב זה דגש על המוצר, מה הוא אמור לשדר, והאם העיצוב והמבנה מתאימים למותג שמפרסם האתר.
לדוגמה עבור אתר גאדג'טים הרבה פעמים הולכים על עיצוב שחור אם מראה "חדשני", ועבור אתר בריאות נבחר בירוק כדי לשדר שזה הנושא בו עוסק האתר.
לבחירת הצבעים בהתאם למוצר יש משמעות רבה, כנ"ל לגבי המבנה, אם מדובר באתר שאמור להיות חדשני, גם המבנה אמור להיות כזה, כמובן בכפוף לשיקולים הנוגעים לשמישות האתר בעיני המשתמש.
שלב חמישי - העיצוב
יש מבנה, יש צבעים, יש תוכן והמיקום שלו, כעת מה שנשאר הוא לצקת הכל לתוכנת העריכה הגרפית, ולהביא לידי ביטוי את היכולות הגרפיות שלכם, אך לא פה נגמרה העבודה.
בשלב העיצוב בא לידי ביטוי החלטות הנוגעות למבנה, לדוגמה קבענו כין בין התוכן של בלוק מסוים לאחר יש רווח מוגדר, אנו לא נשים תמונה ששוברת את הרווח שנקבע, גם אם זה יהיה הכי מושלם בעולם, קבענו רווח מסוים ואנו נשמור עליו ולא נשבור אותו לאורך כל העיצוב.
בנוסף אם חילקנו למספר טורים את התוכן, רצוי שכל בלוק של תוכן יהיה זהה ברווח לזה שלידו, זה יקל על המשתמשים ויעלה ברמה את העיצוב.
הרווח בין כל בלוק של טקסט, או לבלוק לידם יהיה קבוע, ובכך אנו נשמור על עיצוב מאוזן וחוזר על עצמו, דבר היקל על המשתמשים.
הקווים המנחים של העיצוב
אני חושב שנגעתי במאמר בקווים מנחים הנוגעים לעיצוב אתר, החל מתהליך החקר, ועד לתהליך יצירת העיצוב.
אני ממליץ להרחיב בנושא השימושיות כדי לקבל הבנה יותר טובה על מבנה האתר והשפעה של החלטות שונות על המשתמש, וכדי להבין את צד הלקוח טוב יותר.
כהתחלה אני ממליץ לקרוא את הפוסט להגיע לאפיון הנכון (Netcraft) שעוסק ביצירת אפיון בדרכים שונות, ובין היתר מתייחס ללקוח במהלך האפיון.
המשך עיצוב נעים.
2 תגובות:
איתי,
כרגיל תענוג גדול לקרוא אותך...!
איזה יופי לקרוא על כך שלב שלב
זה נהדר.. תמשיכו לכתוב ולעדכן
הוסף רשומת תגובה