Choose Color style

bg

Ui vs Ux

במאמר זה אני אני אשתף כמה עקרונות בסיסיים, הם מבוססים על:

 Jakob Nielsen’s 10 Usability Heuristics for UI Design, Ben Shneiderman’s The Eight Golden Rules of Interface Design, and Bruce Tognazzini’s Principles of Interaction Design.

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

עקרונות ה- עיצוב של העיצוב ממשק משתמש:

הצב את המשתמשים בשליטה בממשק.1

הפוך את זה לנוח לאינטראקציה עם מוצר.2

הפחת את העומס הקוגניטיבי.3

הפוך את ממשקי המשתמש לאחידים.4

הצב את המשתמשים בשליטה בממשק.1

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

הפוך את הפעולות להיות באפשרות של חזרה לאחור – תהיה סלחן .

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

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

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

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

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

צרו ממשק שניתן לנווט דרכו בקלות

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

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

לספק רמזים חזותיים – רמזים חזותיים משמשים כתזכורת למשתמשים.

צריך לאפשר לנווט בקלות בממשק.

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

משתמש לא צריך להיות ב- ” איפה אני ?” או “איך הגעתי למסך הזה .

חיזוי. למשתמש צרכים להיות רמזים שיעזרו להם לחזות בתוצאה של פעולה מסיימת, משתמש לא צריך לחשוב “על מה אני צריך ללחוץ בשביל לבצע את המטלה שאני רוצה לבצע” או “מה הכפתור הזה עושה?”

.

ספק משוב אינפורמטיבי

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

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

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

ירוק

הראה נראות של סטטוס המערכת

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

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

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

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

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

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

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

2.הפוך את הממשק לקל לשימוש בעת אינטראקציה עם המוצר .

הסר את כל האלמנטים שאינם עוזרים למשתמשים שלך

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

דוגמה טובה לאפליקציה העוקבת אחר גישת ‘פחות זה יותר’ על ידי הימנעות מעומס ממשק בתוכן או בתכונות היא iA Writer.

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

אל תבקש מהמשתמשים נתונים שהם כבר הזינו

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

הימנע מז’רגון ומונחים מונחים מערכתיים

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

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

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

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

תכננו ממשקים נגישים

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

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

השתמש במטאפורות מהעולם האמיתי

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

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

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

מהנדס השגיאות :

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

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

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

  1. הפחת את העומס הקוגניטיבי

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

בשנת 1956, הפסיכולוג ג’ורג ‘מילר הציג לעולם את תורת הצ’אנקינג. בעבודותיו אומר מילר כי זיכרון העבודה האנושי יכול להתמודד עם שבעה “נתחי” מידע פלוס מינוס בזמן שאנחנו מעבדים מידע.

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

קל יותר לסרוק ולהזין נתחי מספרים במקום מספר שלם.

צמצם את מספר הפעולות הנדרשות להשלמת משימה

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

הכרה על פני זיכרון

 

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

 

לקדם ארגון חזותי

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

 

הפוך את ממשקי המשתמש לאחידים.4

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

עקביות חזותית (סגנון)

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

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

עקביות פונקציונלית (התנהגות)

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

תואם את ציפיות המשתמש

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

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

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

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

עגלת קניות היא טרמינולוגיה מוכרת; מרכז הקניות אינו יכול לבלבל את הקונים.

מסקנה:

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

תהליך בניית תוכנה/אפליקצייה

תהליך בניית המוצר מתחיל במחקר של קהל היעד ובדיקת תחום העיסוק של המוצר.

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

רק עכשיו מגיעים לשלב של העיצוב הגרפי

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

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

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

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