יום שבת, 5 בנובמבר 2016

פרק 2 - עקרון הגשטלט



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

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



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



גישת הגֶּשְׁטַלְט מגרמנית: Gestalt; צורה, תבנית, דפוס היא תיאוריה פסיכולוגית שצמחה בגרמניה, הבאה לידי ביטוי גם בזרמים אמנותיים שונים. גישה זו מדגישה את חשיבותן של תבניות שלמות בתחום התפיסה, הלמידה והאישיות, בניגוד לגישות אחרות המדגישות מרכיבים בודדים של התמונה המלאה. 

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

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

עקרונות הגשטלט:

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



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

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




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



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


פשטות: כל נתון שהפרט נחשף אליו מתורגם תמיד לרמה הכי פשוטה שאפשר. 



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


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


לתיק העבודות שלי לחצו כאן

יום שבת, 29 באוקטובר 2016

עיצוב לווב – מהם העקרונות שאסור לשכוח?




פרק ראשון: היררכיה

לפני שאנו באים לעצב אתר, אפליקציה או עמוד נחיתה עלינו להתחשב בכמה עקרונות: היררכיה, גשטאלט (הנטייה האנושית לזהות תבניות בכל מקום ולהשלים "חורים במציאות"), מודלים מנטליים, Fits Low, Hick's Low skeuomorphism.

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

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

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

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

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



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


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

איך יוצרים היררכיה? מבינים מה חשוב ללקוח, מה חיוני למשתמש, מה החשיבות היחסית של כל אלמנט בממשק

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

















לסיכום, היררכיה בממשק תבנה מהנקודה הראשונה אליה היינו רוצים שהמשתמשים יסתכלו קודם.


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

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

לתיק העבודות שלי לחצו כאן

שלכם, אוליביה