עיצוב ממשק משתמש ל- FLEX

4 בספטמבר, 2010

חברת 5IVE // מעצבי ממשק משתמש – בפוסט על עיצוב ל- FLEX ||| כידוע גורלו של הפלאש אינו ברור אל מול גיחתו המסעירה של ה- HTML5. רבים חושבים על עתידם הצפוי של סרטוני הוידאו (המממושים כיום ב- Flash ) , של האנימציות ושל אתרי הפלאש למיניהם, אבל יש נישה נוספת – נישת ה- FLEX. יש לנו לקוחות שזו סביבת הפיתוח שלהם, כך בחרו לממש את היישומים שלהם. מדובר ביישומים ארגוניים בד"כ, לא בסתם web services לציבר הרחב.

גורלו של הפלקס כרוך בודאי בגורלו של הפלאש כולו: דעיכה בשימוש בפלאש תדעיך אותו בוודאי גם, אלא שאולי הקצב של דעיכתו יהיה נמוך יותר. כאשר אנו עוסקים ב-עיצוב ממשק משתמש ל- FLEX, אנו נוהגים לדלוור את העיצוב בדרך של styling ישיר של הקונטרולים של FLEX. אפשר לעשוות זאת באמצעות ה- Flash Builder 4, או באמצעות כלים אחרים כמו ה- Flex Style Explorer. לעיתים styling (כלומר יצירת CSS ל-פלקס) אינו מספיק – אינו מאפשר להגיע לעיצוב המבוקש, ואז מעצב ה- FLEX שלנו צריך לעבור לטכניקת skinning שהיא מורכבת יותר, ומצריכה יכולת קידוד ה- mxml.

אני מניח שאספר עוד על הטכניקות האלה לעיצוב ממשק משתמש וחווית משתמש באחד הפוסטים הבאים (אלא אם, כאמור, ה- FLEX ידעך חלילה קודם…)

יורם

תגים: ,
שייך לקטגוריות על חווית משתמש | אין תגובות »

GUI mockup

27 באוגוסט, 2010

חברת 5IVE // מעצבי ממשק משתמש – בפוסט על GUI Mockups ||| בזמן האחרון יותר ויותר לקוחות מבקשים מאיתנו להכין mockups (או בתלעיז עברי – מוקאפ) לממשק המשתמש המיועד. mockup כזה יכול לשמש הן ככלי ל- POC וכן כמערכת הדגמה עבור משקיעים, מנהלים בכירים וכד'.

אני מודה, פעם לא התחייסתי ל- mockups בחשיבות הראויה והתבטאתי בסגנון, "מה, אתם לא רואים שכתוב כאן שאם לוחצים על הכפתור הזה אז מופיע המסך הממוספר 2.3.1, ואם לוחצים לו על הקומבו נפתחת הרשימה שמובאת בצד כאן מימין?" ובכן, לא, לא רואים. אמנם אני רואה בקלות, הכל מתנגן בדמיוני כמו סרט (עדיף לא של טרנטינו), אבל רבים אינם רואים. למה הדבר דומה? לאמן שחמט שבא ומדבר בפני קהל מזדמן, ומתחיל לדקלם  משחק נפלא ועיניו בורקות: "ה2 – ה-4, רץ ג'3 – ג'5+ …" וכו', ומצפה שכל מאזיניו יתרשמו מגדולת המהלכים. עצם העובדה שאותו אמן מסוגל לתסרט הכל בדמיונו כתוצאה מנסיונו וכשרונו, אינה מבטיחה כלל שגם קהלו יוכל לעשות זאת. הקהל דורש לראות את הכלים נעים על לוח השחמט!

משחק שחמט - גם זו חווית משתמש

משחק שחמט. ה- mockup החי (והמוות הנוכח).

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

איך אנחנו עושים mockups להדגמת תכנון ממשק משתמש ועיצוב ממשק משתמש? זה תלוי, לעיתים ב- WPF בשימוש ב- expression blend, לעיתים ב- Flash, לעיתים ב- HTML. הכל לפי אופי ה-מוקאפ והאיכויות המצופות ממנו.

עוד על הדגמת חווית משתמש באמצעות mockups  - באחד הפוסטים הבאים.

- יורם

תגים: , ,
שייך לקטגוריות על חווית משתמש | תגובה אחת »

GUI Design לאפליקציות מורכבות

21 באוגוסט, 2010

חברת 5IVE // עיצוב ממשק משתמש – בפוסט על GUI לאפליקציוות מורכבות – – – זה לא סוד שיש לנו ב- 5IVE התמחות חזקה באפליקציות בעלות מורכבות, סיבוכיות לוגית. אפקליציות אלה מתאפיינות באזור אפור רחב ידיים בין המעטפת החיצונית (ממשק המשתמש) לבין ליבת הלוגיקה של המוצר (הלוגיקה העסקית). GUI Designers "רגילים" לא מסוגלים לטייל גם בתוך האזור האפור הזה, ולכן בעצם, הם די מנוטרלים בעת הנסיון לגבש ממשק משתמש ראוי, לוגי, הולם, למוצר.

GUI Designer ממוצע - אחרי שנחשף למערכת מורכבת (מתוך edgewatertech.wordpress.com)

אביא דוגמא: יש לנו לקוח שמערכותיו הן סופר מורכבות, עוסקות ברישויי תוכנה, DRM; לוגיקת הליבה שלהן סבוכה מאד, כוללת הרבה מאד מקרי קצה, rollbacks, תמיכה בשדרוגים ובשינמוכים של רישוי וכדו', כאשר כל פעולת משתמש משליכה בבת אחת על אוסף גדול מאד של אובייקטים – שלהם יש יחסי הכלה ואסוציאציה מורכבים כרגלי תמנון… ובכן, כדרך הטבע, רק כאשר מישהו (כלומר ה- GUI Designer) מתחיל ללנסח את תהליכי העבודה של המשתמשים – מתגלה המורכבות במלוא הדרה, ומתעורר הצורך להשלים את הלוגיקה העסקית, לטייב את הלוגיקה העסקית, להתאימה לפעולות שמשתמשים באמת רוצים לעשות, לפעולות שמשתמשים יעשו. ובכן, פה נדרש מתכנן ממשק משתמש שאינו מהסוג "הרגיל", אלא כזה שיוכל – בלי חשש – להכנס לתחום האפור בין הממשק ללוגיקה העסקית, לצעוד בו בבטחה, לייעץ, לכתוב מפרטים הכרוכים בלוגיקה דוקא ולא בממשק, להציע שיפורים במודל המוצר (ולא, לא במודל הממשק), ולהיות בעל יכולות כאלה כך שהלקוח יכיר בו כבר-סמכא גם במישורי הלוגיקה העסקית ומודל האובייקטים.

צריך לומר את האמת: 99% (אני עומד מאחורי זה) מה- GUI Designers אינם בעלי היכולת לפסוע באזור האפור (אולי יותר נכון לומר – לפסוע שם בלי להראות כמוקיון). לכן אני משתאה לעיתים כאשר חברה בעלת מוצרי תוכנה מורכבים לוקחת יועצי חווית משתמש מחברות "רגילות", כאלו שיכולות להציע גרפיקה מרשימה, אבל נאטמות כאשר נוגעים בלוגיקה. לדעתי – זה נובע מתאום ציפיות משונה: לא רק שמתכנני ממשק משתמש אינם מצפים מעצמם ליותר – גם הלקוחות שלהם אינם מצפים מהם ליותר, "תעשו לי את זה יפה, ותעשו לי את זה שימושי ברמת פריסת הפקדים על המסך". אז לא, חברת תוכנה יקרה, ו- לא, יועץ ממשק משתמש יקר, לא תצליחו כך להפיק מוצר איכותי: אתם מגבילים את עצמכם לרמת היופי ולרמת ה- micro-usability, שם, אם אתם טובים, תצליחו להפיק את מלוא העשרים אחוז שימושיות שגלומים שם. עלהשמונים אחוז שימושיות, שגלומים במאקרו, ויתרתם מראש.

בתקווה לפוסטים פחות תוקפניים,

יורם

תגים: ,
שייך לקטגוריות על חווית משתמש | אין תגובות »

עיצוב ממשק משתמש ב- WPF

18 באוגוסט, 2010

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

"לא, מה פתאום מאוחר," ענינו.

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

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

תגים: ,
שייך לקטגוריות על חווית משתמש | אין תגובות »

פרויקט כיפי ב- WPF

27 ביולי, 2010

חברת 5IVE // עיצוב ממשק משתמש בפוסט על עיצוב WPF – – – בימים אלה אנו מבצעים פרויקט כיפי ב- WPF. המדובר באפליקציה שנועדה לתרגל כבדי שמיעה בשיפור יכולת השמיעה שלהם. עיצוב האפליקציה מודרני וקליל – רקע לבן עם אימג'ים גדולים כשצריך, תוך שליטה של צבעי כחול וחום. אוורירי מאד. המימוש ב- WPF הלך מהר יחסית: הקמנו מסך ראשון בעזרת Expression Blend, השתמשנו ב- tab control כדי ליישם את מנגנון החלפת ה- views, ובחרנו שהכל – אבל הכל – ימומש באמצעות window יחיד. הנחינו את תוכניתן הלקוח למתג את תכונת ה- visible של grids שונים לפי ה- state של היישום, כך שאותו חלון מחליף תכולה בפשטות ובמהירות.

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

תגים:
שייך לקטגוריות על חווית משתמש | אין תגובות »

קו התפר בין ממשק משתמש לבין ניתוח מערכת

9 ביולי, 2010

חברת 5IVE // עיצוב ממשק משתמש בפוסט על  תכנון GUI וניתוח מערכת – – – מסיבה זו או אחרת, הצוות שלנו מעורב לאורך השנים באפליקציות המצטיינות בסיבוכיוות אינהרנטית גבוהה מאד. למשל, אפליקציות העוסקות במודלים מורכבים לרישוי תוכנה (עבור Aladdin / SafeNet), מערכות עתירות סיבוכיות להאצת ודחיסת storage (למשל עבור Storwize ו- Sanrad), או מערכות מקצועיות סביב SDK (כמו עבור RadVision).

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

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

2. קו התפר בין ניתוח ותכנון מערכת לבין תכנון ממשק משתמש מתרחב, מאפיר ומתערפל.

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

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

יורם

שייך לקטגוריות על חווית משתמש | אין תגובות »

מעצבי WPF

24 ביוני, 2010

חברת 5IVE // עיצוב ממשק משתמש בפוסט על  WPF – – – ובכן אותו לקוח שלנו שבהתחלה חשב ללכת על dot net ואחר כך הגיע למסקנה שעדיף לעבור ל- WPF, זוכרים אותו? (ראו שני פוסטים קודמים בהשתלשלות העניינים איתו). ובכן כהערכות לפרוייקט בטכנולוגיה החדשה, התוכניתנים של הלקוח למדו את ה- WPF במשך כחודש. לא פחות. תוך כדי כך קיבלו מאיתנו דוגמאות לאלמנטים של הממשק שלהם הממומשים כבר ב- XAML, הראינו להם למשל כיצד כפתור יכול להימתח ככל שצריך בלי בעיות כשממומש טוב ב- XAML (באמצעות Expression Blend), והצענו כל הדרכה נוספת שתידרש.

אלא מה, שבחלוף חודש, התוכניתנים של הלקוח הרימו דגל לבן: הם לא מצליחים להבין מספיק את סביבת WPF (עם #C) והם נסוגים חזרה אל קו הביצורים שלהם: דוט נט. זה אומר משהו על הסביבה הזו, לא? מהצד של המעצבים אנו יכולים להעיד בהחלט שהיא מחייבת עקומת לימוד רצינית, זו הסיבה, לדעתי, שלא רבים מהמעצבים הצליחו להכנס לזה. כיום, לאחר מספר פרויקטים שעשינו ב- WPF, קל לנו לשלוט בה ולהשיג את החזות והאינטראקציה הנחוצים, אבל ימי הלימוד בזמנו היו לא פשוטים. והנה, גם הצד של התוכניתנים לא פשוט כלל, עד כדי כך שהתוכניתנים נכנעים לאחר חודש (!) של לימוד.

מיקרוסופט, תנו על זה את הדעת. תציצו בכלים כמו FLEX  ואפילו Flash Catalyst, אולי אפשר ללמוד משהו?…

יורם

תגים: , , ,
שייך לקטגוריות על חווית משתמש | אין תגובות »

אפליקציות iPhone

4 ביוני, 2010

חברת 5IVE // עיצוב ממשק משתמש בפוסט על אפליקציית אייפון – – – אנחנו עובדים כיום על עוד אפליקציית אייפון (החיים שלנו בהחלט מגוונים – בבוקר WPF, בצהריים iPhone, בערב אנדרואיד…). היא נראית כך, פחות או יותר (העיצוב ובוודאי הטקטט אינם סופיים):

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

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

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

יורם

תגים: , ,
שייך לקטגוריות על חווית משתמש | אין תגובות »

iPad Multitouch

28 במאי, 2010

חברת 5IVE // עיצוב ממשק משתמש בפוסט על  iPad – – – ברור, iPad תומך ב- multi-touch. אבל בכמה אצבעות בו זמנית אפשר לגעת? שתיים? אולי חמש?

ובכן, התשובה, כפי שמביא אותה Matt Legend Gemmell הזריז, היא –

היא… 11.

כן, ממשק האייפד תומך ב- 11 אצבעות.

כמובן, צצו כל מיני השערות בדבר "תשתמש ב- 10 אצבעות וב-…" אבל נשאיר את זה בצד (או לפחות בתחתונים).

הנה סרטון של מאט, אשר מראה אומנם 10 אצבעות, אבל הוא נשבע שהוא בדק ווידא 11. הנה:

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

י.

תגים: , ,
שייך לקטגוריות על חווית משתמש | תגובה אחת »

אפליקציות אייפון – הכנס

28 במאי, 2010

חברת 5IVE // עיצוב ממשק משתמש בפוסט על  אייפון – – – שלשום יצא לי להשתתף בפאנל המומחים שארגנה קהילת User Experience Israel בנושא אפליקציות אייפון.

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

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

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

  • האם הגודל קובע? ובמילים אחרות, כיצד מייצרים WOW למרות המידות הקטנות של התצוגה?
  • ביישומי productivity, כמו למשל Email, גודלו הקטן של מסך ה-mobile מגביל את כמות המידע שניתן להציג בו זמנית, ולכן על המשתמש לעבור לעיתים קרובות בין מסכים, ומכאן – ריבוי "קליקים" – נגיעות. האם כל נגיעה במסך מגע של mobile – גורמת לאותו עיכוב כמו קליק במסך רגיל גדול?

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

יורם

תגים: , ,
שייך לקטגוריות על חווית משתמש | 2 תגובות »

« פוסטים ישנים יותר