ui lecture at uxi live2013 complex systems simple solutions publish


UI 2חברת

UXמומחי

מעצבים

גרפיים

FEDפיתוח אנשי

WPF, CSS3, HTML 5

ניסיון Front Endהתמקדות ב

בשנתיים

האחרונות

30

14

14

1700

400

700

פרוייקטים

לקוחות


3 דוגמאות לפרוייקטיםMobile App

Modu, Ituran, Taldor, Partner, Motorola, Retalix, Comverse

WPF & Silverlight

Rit Technologies, IDF, IAF, Microsoft, Lavie TimeTech, Bank Leumi

Elta, Nice Systems

Online Trading

EZ trader, eBay, Bank Hapoalim, Umoo

Medical Systems

Galil Medical, dbMotion, Shahal Medical Services, Medingo,

Lumenis


4 דוגמאות לפרוייקטים

Homeland Security

Nice Systems, I-SEC Technologies, Elbit, IDF, Logic Industries,

Verint

Information Security

Whitebox Security, ForeScout, Covertix, HP, TrustWare

ERP & CRM

Astea, Ishi Yashir, Attunity, e-Glue, Cellcom, Flying Cargo, Open-TV

Portals

SAP, ECI, Bank Hapoalim, Shahal, Microsoft, ביטוח לאומי


תוכן עניינים

ניהול מוצר – 1שער –Multi Platform Road Map

–Native Vs. HTML 5

–Visionary Demo

מתודולוגיה – 2שער Agileבמתודולוגית UXשילוב מומחי –

UXשילוב הגרפיקה ב –

–Fast Prototyping Vs. Power Point

אפיון ועיצוב – 3שער –Visualization

–Responsive Design

–Animation

5

פתרונות פשוטים –אתגרים גדולים


1 תובנות הקשורות לניהול מוצר


פיתוח למספר פלטפורמות

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

1.1


העולם שייך למובייל

Multi Platformכולם רוצים

8

...אבל .ההצהרות לבין היישום בפועלקיים פער בין

:שאני אוהבמשפטים " המערכת שלנו היא קודם כל דסקטופית ועובדים עליה בעיקר

"מהמשרד ולכן שם הפוקוס שלנו ורוב המאמץ

" אני רוצה אפיון לדסקטופ שהואFully Functional בטאבלט אבל

"בהבנה שהוא לא אידיאלי לטאבלט

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

"בהמשך נאפיין מערכת ייעודית עבורו


9 ?למה זה קורה

כנראה שילוב של כולם

חוסר ידע ?

פחד ?

חוסר תקציב ?

שמרנות וקיבוע מחשבתי ?

של הלקוחות" הקטנות"בולטות של התלונות ?

לארים שיש למתחרים ולנו 'בולטות של פיצ?


SporTracker: 10 דוגמה


PC Tablet Smartphone Feature

Not Relevant TB-3 SP-1 GPS 1

PC-1 TB-1 SP-1 2 אימון ח"דו

PC-3 TB-1 SP-2 אימון שיתוף

ותמונות עם חברים3

PC-2 TB-3 SP-3 4 אימון תכנון

PC-2 TB-2 SP-3 5 ח שנתי"דו

PC-1 TB-2 SP-5 6 ניתוח תוצאות

Road Map 11תובנות לגבי ה


1.2 Native אוHTML5



...לפי מר צוקרברג המנצח הוא

הובילה HTML5לדבריו מימוש אפליקציית פייסבוק למובייל ב

חזרה "שימוש מאתגרת ואיטית אך כעת פייסבוק לחוויית

מימשו iOSואת הגרסה האחרונה למשתמשי , "למסלול הנכון

של מידע ( 2פי )מה שהוביל לצריכה גבוהה , Nativeב

.מהאפליקציה

13

?האמנם

Native -ה


לא הכל שחור ולבן

מבחינת תחזוקה

14

מבחינת חווית שימוש


5HTML Native

משתמש טובהחוויית תמיכה במספר פלטפורמות

לא כבול לדרישות הדפדפן תחזוקה פשוטה וזולה

גישה מלאה לרכיבי תוכנה ניתן להתאמה/גמיש

וחומרה של המכשיר

אנשי , מיקרופון, מצלמה)

('קשר וכו

ביצועים מהירים

אל תגידו " 15 יתרונות מול חסרונות

HTML5

תגידו

Browser"

Hybridהגישה הנפוצה היא

.HTML5וכמה Nativeוהשאלה כמה פיתוח


שורה תחתונה

:התשובה תלויה באופי ובצרכים של המוצר

16

קלות תחזוקה

המשתמש חוויית וביצועים

Native

HTML5


1.3 Visionary Demo



Visionary Demo

חשיבה מחוץ לקופסא ללא אילוצים ומגבלות.

פחות אפיון מפורט

שימוש במטאפורות

מצגת מעוצבת של ממשק המשתמש : התוצר

(.אפשר גם דמו)העתידי

18

שעות לחיפוש 50פרוייקט שכזה יכול לנוע בין

שעות ויותר בשביל דמו 1000 -לכיוון כללי עד

.עובד ומהפכני של הדור הבא


Connect 19פועלים

: אנשי צוות

100: שעות עבודה

( סניף)חיבור בין האישי

(אינטרנט)למרוחק

רציף בין מעבר

פלטפורמות תוך כדי

שימוש


יתרונות: Visionary Demo

חוויה חדשנית

יתרון על המתחרים

בסיס לתוכנית עבודה לשנה ואפילו לשנתיים קרובות(SAP)

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

20

SAP, NICE, RIT, Retalix ,בנק הפועלים, א"ח : לקוחות לדוגמה



2 מתודולוגיות עבודה


UXשילוב מומחי 2.1

Agileבמתודולוגית

מתודולוגיות עבודה


Agile - 23 הבעיה

UXהינן דווקא החוזקות של ה Agileבעיות ה

. ולכן תפקידנו לאזן את זה UCDוה


24 ערוצי עבודה

Release 1.0 M.S 1 M.S 2

s1 s2 s4 s5 s7 s8 DEV

UX Accomp.

M.S 1 M.S 2

s1 s2 s4 s5 s7 s8 s9 s6 s3 UX Spec.

UX Vision

S0

30%

50%

20%


ועוד שני טיפים קטנים לקינוח

קרבה פיזית ללקוח

פתרונות גמישים

25


מעצבים גרפיים בעידן החדש 2.2



Creative Earlier 27


2.3


Fast Prototyping Vs.

Power Point


Power Point Sketch Flow, Axure

עלות הלימוד

עלות האפיון

תחזוקה

שילוב גרפיקה

הדגמת תהליכי עבודה

PP Vs. FP:29 תפעול בסיסי


Power Point Sketch Flow, Axure

אנימציה

התוצר

תפעולי פקדים

אינטראקציה

בין אובייקטים

הדגמת

תהליכי עבודה

תקשורת עם

לקוחות

PP Vs. FP :30 אנימציה והדגמת תהליכי עבודה


Prototyping - 31 מסקנות

בעקבות היכולות Power Pointאנו בחרנו ב

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

.הלקוח וקלות הלימוד של הכלי



3 תכנון ועיצוב


3.1 Visualization

תכנון ועיצוב


האתגר -מידע ויזואליזצית

בדגש עלונתונים באמצעים גרפיים להמחשת מידע שימוש:

מידעעומס

Dashboards

נתונים מרחביים

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

34


35 פתרונות -מידע ויזואליזצית

: תרחיש

אחר המלצות חיפוש

לתחבורה ציבורית

.מנקודה אחת לשניה

:מפה



רשימה



עם עיבוד גרפי –רשימה



בתוספת מימד להמחשה –רשימה



לפי תזמון התחבורה Xמסודרת גם על ציר -רשימה


?כיצד זה נעשה בפועל

ניתוח מימדי המידע.

ניתוח תפקיד ודירוג המימדים

התאמת התצוגה למימדי המידע תוך שימוש

:בעקרונות גשטאלט וסקירת מידע

שימוש בצבע

גודל

קונטראסט

ריווחים ועימוד

40


3.2 Responsive Design



42 ?מאיפה זה התחיל


Responsive Designהיסטריית

“This is not a trend—it’s the future.”

43

http://www.fastcocreate.com/1681446/4-rules-for-creating-interactive-content-for-a-multi-platform-multi-device-world

MILLER MEDEIROS AND DAVID VALE

Teched 2008:

Advanced and Adaptive User Interfaces. Gil Hupert-Graff

UI 2010:

Internal Scaling Behavior methodology

Ethan Marcotte 2010:

coined the term

“responsive web design”

Net magazine 2012:

2nd Top Web Design Trends for 2012.






























דוגמא

44

/http://www.starbucks.com

http://www.starbucks.com/




Responsive Design - תובנות

בתוך "מול אפיון ( Multi-platform" )בין השכונות"אפיון

(One platform" )השכונה

45

בתוך השכונה

בין השכונות


אנימציות באפיון 3.1



סוגי אנימציות

(נימציהA)אנימציה פונקציונלית

(נימציהB)אפקטים / דקורטיבית אנימציה

(נימציהC)אנימציה סגור סרטון

47


פתרונות -חשיבה אנימטיבית

שילוב התנועה עוד בשלב הקונספט

פיתוח מתודולוגיה סדורה לעיצוב תנועה

חומר"סדר ו, קצב, התייחסות מיוחדת לתזמונים "

התנועה

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

48


49 דוגמה -אנימציות

פשוטים פתרונות –אתגרים גדולים

סיכום


סיכום

ניהול מוצר – 1שער –Multi Platform Road Map

–Native Vs. HTML 5

–Visionary Demo

מתודולוגיה – 2שער Agileבמתודולוגית UXשילוב מומחי –

UXשילוב הגרפיקה ב –

–Fast Prototyping Vs. Power Point

אפיון ועיצוב – 3שער –Visualization

–Responsive Design

–Animation

51


סיכום

UXאנו בתקופה מדהימה מבחינת ה

פריצות דרך טכנולוגיות ומתודולוגיות

אין סטנדרטים חזקיםעוד

היכולות הטכנולוגיות מאפשרות גם לאפיין אסונות

מתודולוגיות הAgile מומחי " אכול"יודעות ללאUX ומאתגרות .אותנו גם במהירות וגם באיכות הפתרונות

והתשובה שלנו

חדשנות

מקצוענות

פשטות

52

UIצוות

תודה רבה

ui lecture at uxi live2013 complex systems simple solutions publish

Documents