בס"ד
עיצוב ממשקים וחווית משתמשים
UI/ UX
…….”
וזה מחמת כי הראות הוא משרת ושליח של המוח
להביא הדבר שרואה לתוך המוח
כי עיקר הראייה היא הידיעה, דהיינו לידע מהות הדבר שרואה
והידיעה היא במוח, וכשרוצה המוח לידע זה הדבר שעומד כנגדו
אזי הוא שולח את הראות
והראות הולך ורואה את הדבר ומביאו לתוך המוח, ואזי יודע מה שרואה
“…….
למעשה, המונח הרווח הזה השגור בפי כל: עיצוב ממשקים וחויית משתמשים, וגם באנגלית הקיצורים האלה
‘UI’ / ‘UX’ ,
הם למעשה ראשי תיבות של
‘User Experience’
או
`User Interface`
וזה למעשה בא להורות על השלבים הראשונים בבניית כל אפליקציה למכשיר חכם, ולכל
אתר- אינטרנט. וכמובן זה המקום שעל המעצב, או במקרה של פרויקטים גדולים, אז
מדובר במחלקה או הצוות האחראי על העיצוב, מוטלת האחריות הכבדה
ולפעמים גם הגורלית לקביעת התדמית והמראה של החברה, העסק, המוצרים שלהם והעובדים
והחלק של המעצב בתהליך הזה…. זה כמובן העיצוב. כלומר העיצוב המתחשב
בצרכי המשתמש ובנטייותיו הטבעיות בגשתו לחקור דבר או לחפש איזה מוצר
שהוא חפץ לרכוש, ולאו דווקא חפץ לרכוש, אלא גם ההנגשה עצמה של בית- העסק
אל הלקוח תלויה בזה. זה מתחיל בשאלה מי יהיו אלו שיתעניינו בסוג העסק הזה
לאיזה מגדר ומגזר הם שייכים, מה הם יגידו לעצמם כשיגיעו לאתר, ואיזו חוויה ויזואלית ורכישתית או תהליכית
אנחנו מעוניינים להציג בפניהם
היכן ימוקם כל לחצן, אילו לחצנים יהיו באילו מקומות באפליקציה או באתר האינטרנט
האם להשתמש באייקונים במקום לחצן פשוט
איזה דף יקשר לאיזה דף אחר? וכו’ שאלות אלו ודומות להן ילוו את המעצב בכל
השלבים של פיתוח המבנה העיצובי של האפליקציה ו/ או אתר האינטרנט
“
וזה מחמת כי הראות הוא משרת ושליח של המוח
להביא הדבר שרואה לתוך המוח
כי עיקר הראייה היא הידיעה, דהיינו לידע מהות הדבר שרואה
“
שני התרשימים שהצגנו לעיל: התרשים זרימה לכניסה וזיהוי המשתמש, כמו גם התרשים לניווט המשתמש באפליקציה (או באתר ..) הם כמובן חלק חשוב מהתהליך הראשוני של בניית
הממשק למשתמש ו…. חוויית המשתמש כמובן, ועוד לפני שנתחיל במלאכת בניית מבנה השלד של האפליקציה, ניגע בתהליך שגם הוא אחד מהתפקידים של המעצב בימינו, הלוא הוא
התהליך של בניית הפרסונות ותסריטי משתמשים
בניית פרסונות וסיפורי משתמשים
למעשה התהליך הזה של בניית הפרסונות וסיפורי המשתמשים, כל כמה שהוא כיום
למעשה נחשב לחלק מתהליך העיצוב, אינו אלא נושא שחדר לתחום העיצוב מתחום
השיווק. בתהליך זה המעצב למעשה בונה דמויות של משתמשים פוטנציאליים
באפליקציה או באתר כלומר קורא לדמויות ממש בשם ומייחס להן מקצוע, גיל, מקום עבודה, השכלה, תחומי עניין, תחביבים וכו’ אלו הן למעשה דמויות פיקטיביות שמדמות
לקוחות פוטנציאליים, המהלך הזה מסייע לעיצוב בכך שזה מאלץ את המעצב
לשים מול עיניו את העובדה שמה שהוא מעצב… האתר ו/ או האפליקציה וכו’ עומדים
להיות בשימוש ואינן רק פרויקט עיצוב גרידא שבו המעצב צריך להפגין
את יכולות העיצוב שלו ואת כשרונותיו
ורעיונותיו. הוגה הרעיון ומייסדו הוא יהודי בשם אלן קופר שכתב כמה ספרים בנושא
וכל המעוניין להתעמק בנושא ולהרחיב את ידיעותיו ולהבין מדוע זהו תהליך
רצוי וחיובי בעיצוב הממשק ובבניית החווייה למשתמשים יוכל להציץ במאמר הזה
אנחנו כאן נשתדל לקצר ורק להביא דוגמאות על-מנת שהמבקר או הלקוח
לעתיד יבינו במה מדובר
תסריטי משתמשים
כעת, משסיימנו עם בניית הפרסונות (בדר”כ מדובר במספר של בין 3-5 פרסונות עבור פרויקט)
נעבור לחלק של בניית תסריטי משתמש וכך זה אמור להראות פחות או יותר
אחרי שיצרנו משתמשים, אנחנו יוצרים תסריטי משתמשים
בהם אנו ממחישים כיצד כל אחד מהמשתמשים שיצרנו
נקלע למצב בו הוא צריך ומעוניין להשתמש
בשירותי העסק- באתר או באפליקציה
בניית מבנה השלד Wireframing
כשלב ראשון לפני שמציגים מבנה מעוצב ובנוי כהלכתו בפני הלקוח, נוהגים
ליצור מבנה שלד, שבו נזהרים למעשה מלשלב אלמנטים גרפיקאיים או עיצוביים, ומתרכזים
בעיקר במבנה: מה יהיה סדר הדברים המופיעים בפני המשתמש היכן ימוקם כל פרט
איזה מסך מעביר לאיזה מסך, המטרה של השלב הזה היא בעיקר להשיג או להגיע
להבנה עם הלקוח כיצד אמורים האתר או האפליקציה לפעול
.ולא איך הם ייראו כמוצר מוגמר
דוגמא של הדמיית מבנה שלד דינאמית ואינטראקטיבית אונליין
ולהלן נביא כמה תמונות של מסכים מתוך מבנה שלד של אפליקציה
להזמנות של משלוחי מזון באמצעים שונים ברחבי הארץ
הדמייה של האפליקצייה בגרסה המעוצבת
ואם הגענו לשלב של הבנה והסכמה מול הלקוח שהכל נראה טוב, הכל במקומו
ומתפקד כשורה, נוכל כעת לגשת וליצור את הדגם של האפליקצייה בגרסה הקרובה
יותר למציאות, למוצר המוגמר, כפי שיראה לאחר שמתכנתי האפליקציות יתכנתו אותו
לוח השראה Moodboard
וכמו כמעט בכל פרויקט עיצובי למגזר העסקי ובכלל, נצטרך ליצור לוח השראה, הבנוי
ומורכב מתמונות של אפליקציות שונות, כמו גם אלמנטים שונים הקשורים באופן זה או אחר למוצר, החברה או העסק שעבורם אנו יוצרים את האפליקצייה
בניית לוח מתווה- סגנון (Style Guide)
כפי שניתן להבחין בלוחות ההשראה לעיל, בחלק הימני שלהם, שאספנו
לשם את הצבעים הדומיננטים מלוח ההשראה, או את הצבעים שהכי נראו
לנו מתאימים כמעצבים מתוך לוח ההשראה. זוהי התחלה של בניית הסגנון
לאתר או לאפליקצייה. לפני שניגשים לבנייה צריך לחשוב ולהחליט אילו
צבעים ישמשו אותנו ובאיזה אופן כל אחד מהצבעים ישמש במהלך האפליקציה
למשל מה יהיה הצבע של הלחצנים, או איזה צבע יחשב כיותר מושך
תשומת- לב, נצטרך גם לחשוב באילו סגנונות של כתב (פונטים) נבחר להשתמש ובאילו
מקרים נרצה להשתמש בכל אחד מסגנונות הכתב האלו. אילו אלמנטים
גרפיים, אם יש לכך מקום, ישמשו אותנו במהלך הבנייה, אם לשם נוי גרידא
ואם לצרכים אחרים כמו להעביר תחושה או מסר מסויים באיזה עניין וכו’. ולכן
חשוב ליצור מן מתווה כזה, ‘מדריך- סגנון’ עמ”נ שהאתר או האפליקצייה יראו ככלי
שימושי, פרקטי, נעים וחברותי. או כדבר שמשדר לקהל ומדבר אליו בשל האופי
או האמירה שהוא מעביר
האופן שבו הצגנו את מדריך הסגנון הבסיסי הזה, לעיל הוא בהחלט יכול לעזור
אלא שבדרך- כלל נוהגים להגיש ללקוח או למתכנת מדריך סגנון קצת יותר מסודר ומפורט
משהו כזה כשמדובר באפליקציה
יפה, כעת כל מה שנשאר זה באמת רק לעצב את האתר או את האפליקציה
ולשלוח את כל התכניות למתכנתים, למה לא
כיוון שכבר עסקנו בהכנות ויש לנו פרסונות ותסריטי משתמשים, ערכת צבעים, פונטים
ומתווה סגנון (מדריך סגנון …) אז הנה אפשר להתחיל במלאכה. אפשר
לצפות בהדמייה אינטראקטיבית של האפליקציה בלינק הזה
סיכום הדברים
כמו בכל תהליך בנייה צריך שיקדים לו תכנון ישנם כמה קווים משותפים בין תכנון אפליקציה
לטלפון החכם ובין בניית אתר. תלוי בדרישת הלקוח וסדר הגודל של הפרויקט, אבל
ישנם מקרים שבבניית אתר, כיוון שהוא נפתח באמצעות הדפדפן, וכיוון שישנן היום הרבה
דרכים פשוטות יחסית לבנות אתרים גם בלי עזרת המתכנת, אז אולי אפשר לדלג על שלב
של יצירת מבנה שלד, אולי ונאמר זאת בהסתייגות. ההבדל המהותי בין עיצוב אפליקציה
לטלפון ולבין בניית אתר רספונסיבי שיתאים למכשירים השונים הוא כמובן התקציב, ההשקעה
של משאבים וגם הזמן. והסבה לכך נעוצה בזה שאתר אינטרנט האפליקציה שמאפשרת
את פעולתו היא הדפדפן, אפליקציה שמותקנת כבר על הטלפון וכל מה שנותר
הוא רק להתאים את האתר עם אותו מבנה ותכנון למכשירים השונים. ולעומת זאת
אפליקציות לטלפון צריך לתכנת ממש צוות מתכנתים שכביכול יבנה משהו מאין, מסקרטץ’ ולא
זו בלבד אלא שצריך להעמיד צוות מתכנתים המתמחה בבניית אפליקציות לאייפון, וצוות
נפרד המתמחה בבניית אפליקציות לאנדרואיד. ובכל זאת היתרונות שיש לאפליקציה
הינם לעיתים רבים מספיק, כדי שהדבר יגרום להנהלת החברה או העסק ליצור גם
אפליקצייה בנוסף. ובכל מקרה יצרנו גם דף בתפריט, המיוחד לבניית אתרים אפשר להציץ
עיצוב לוגו לעסק, מיתוג העסק,
פרסום דיגיטאלי, פרסום דפוס, פרסום חוצות,
עיצוב אתרי אינטרנט ובנייה, עיצוב אפליקציות,
עריכת סרטי וידאו ויצירת קליפים,
מתן ייעוץ ועוד ….
עיצוב לוגו לעסק, מיתוג העסק,
פרסום דיגיטאלי, פרסום דפוס, פרסום חוצות,
עיצוב אתרי אינטרנט ובנייה, עיצוב אפליקציות,
עריכת סרטי וידאו ויצירת קליפים,
מתן ייעוץ ועוד ….
