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

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

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

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

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

מהמרחב הפיזי לוירטואלי

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

פרוגרמה VS בריף

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

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

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

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

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

סוגי משתמשים

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

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

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

סקיצה של חדר ילדים, ריהוט ומקומות אחסון נמוכים, מותאמים לילדים
סקיצה של חדר ילדים, ריהוט ומקומות אחסון נמוכים, מותאמים לילדים

שלב התכנון

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

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

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

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

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

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

שרטוט דירה  Wireframes VS
שרטוט דירה  Wireframes VS

הדמיה VS מוקאפ

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

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

גן דורות | ירין אלמוג - פרויקט שפורסם במגזין ״בניין ודיור״
גן דורות | ירין אלמוג – פרויקט שפורסם במגזין ״בניין ודיור״
הדמיה בעיצוב פנים מול הדמיה בעיצוב חווית משתמש - מוקאפ
הדמיה בעיצוב פנים מול הדמיה בעיצוב חווית משתמש – מוקאפ

נגישות

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

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

לקוח מאתר מרכז המידע לנגישות
לקוח מאתר מרכז המידע לנגישות

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

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

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

הנעה לפעולה

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

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

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

תשלום (Checkout): לסידור עמדות התשלום בתוך החנות יש חשיבות. מיקומן בחלק האחורי של החנות "מאלץ" את הלקוחות ללכת לאורכה כך שהם ייחשפו לכמה שיותר פריטים בחנות.

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

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

לסיכום

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

והכי חשוב ללמוד ולגלות כל יום מחדש את התחום של עיצוב לאנשים.

לא משנה מה למדתם, אם יש תחום נוסף שבוער בכם, תמיד הוא יוכל לקבל ביטוי ומימד חדש בעשייתכם ואני בטוחה שהתוצאות תהינה מדהימות!

גם אתם לקחתם חלק בפרויקטים מעניינים מדיסציפלינות שונות? כתבו לנו בתגובות!

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע




    What is 6 + 2 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;