אייפון ישראלי וטיפים למתכנני אפליקציות לאייפון

כותרת

אייפון ישראליוטיפים למאפיינים

26.5.2010, ברק דנין

כותרת

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

!נעים מאוד

Uniqיו איי יוניקל ובעלים של "מנכ, ברק דנין UIUXIהמייסד והעורך הראשי של

)חנון מחשבים עם ותק(10מתכנת מגיל

גוריון-תואר ראשון במדעי המחשב מבן

שנים UI (–8(מתכנת וראש צוות תכנות ממשק

–Xerox-ב UXומנהל צוות ) UX(מעצב חוויית משתמש שנים 4-כ

של האוניברסיטה הפתוחה" חשיפה"לימודי עיצוב ב

http://www.usable.co.il": שימושי. פשוט"בלוג

כותרת

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

iPhone-האתגרים העיקריים לאפליקציה ב

480x320שטח מסך מצומצם מינימום מידע על המסך

קשב -סביבה, SMS, שיחות נכנסות:הפרעות יכולות להתרחש בכל רגע שמירה אוטומאטית של מצב

) בינתיים( multi-taskאין משימות סדרתיות פשוטות

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

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

. 5אפשר , כפתורים לרוחב 4-מומלץ לא יותר מ .לרווח מסביב לכפתורים

כותרת

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

iPhone-האתגרים העיקריים לאפליקציה ב

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

פקדי מגע מגושמים

מכסים את כל המסך לפעמים ....גם כאן יש פתרונות יצירתיים

כותרת

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

"עצלים"קיצורי דרך למקלידים

כותרת

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

אפליקציות של עיתונים ואתרי חדשות

כולם חושבים שמזג האוויר חשוב

כותרת

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

אפליקציות של עיתונים ואתרי חדשות

כולם חושבים שמזג האוויר חשוב

nrg כנראה כדי לדעת איזו תחזית להציג, משתמשים במיקום)?לא, מטריד(

כותרת

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

?יש סטנדרטים לאייפון עברי, חוץ ממזג אוויר

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

.לעתים יש התעלמות מסטנדרטים אוניברסליים, אין סטנדרטים לעברית

למערכת באייפוןאייקון שמשמש אותומשמש לדיווחים מהשטח , ל"הדוא

"). דואר האדום/להמיי(" nrg-וב Ynet-ב–") דואר("ל "בוואלה הוא משמש לדוא

.בהתאם למקובל

מימין בחלק הראשי נמצא האייקוןתואם לכיוון (ובחלק משמאל , מהאפליקציות

).נראה עוד מעט–הממשק

הקשורות טכנולוגיות -התלבטויות עיצוביותהקריאה מוצאות פתרונות שונים לכיוון

.באפליקציות עבריות

כותרת

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

?עברי דבר עברית

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

.אינו שונה מבחינה זו

התפריט :בחלונות העניין עלה כבר מזמןומה עם סרגל ? מיושר לשמאל או לימין

? הכלים

לא קיבלנו עדיין מענה 2007גם באופיס .עברי מלא

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

כותרת

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

המצב ביישומי החדשות

כותרת

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

רכיבי ממשק סטנדרטיים

המופיעים , סטנדרטיים) controls(יש אוסף פקדים Apple-ל Appleבכל האפליקציות המובנות במכשיר וגם במדריך של

למתכנני הממשק

כותרת

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

שימוש ברכיבים סטנדרטיים

:היתרונות בשימוש ברכיבים הסטנדרטיים

הם תוכננו בקפידה ונבדקו לעומק

מכילים יתרונות שלא ברורים מאליהם במבט ראשון

המשתמשים רגילים אליהם

:כשבוחרים להשתמש ברכיבים לא סטנדרטיים

אפשר ליצור מראה שהוא ייחודי לאפליקציה

).usability(מסתכנים בבעיות שמישות

כותרת

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

דוגמה לשימוש ברכיבים לא סטנדרטיים

:זהו רכיב סטנדרטי לבחירה מרשימה).picker(גלגל ענק

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

: היתרון של שניהם.מאפשרים בחירה נוחה בעזרת מגע

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

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

כותרת

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

כמה פתרונות יצירתיים

?nrg-כמה מדורים יש ב.די ברור–אבל מרגע שמגלים , קצת קשה לגלות

כותרת

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

לאומי דיגיטל

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

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

.תנועה

: החסרונותלמרות שיש להם , החצים לא לחיצים

מימדי-מראה תלת

ולא תמיד ) נמוכה(הרצועה מעט צרה לפחות (בה בעזרת האצבע "פוגעים"

...)אני

?מישהו רואה את התפריט הנסתר

כותרת

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

לאומי דיגיטל

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

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

.תנועה

: החסרונותלמרות שיש להם , החצים לא לחיצים

מימדי-מראה תלת

ולא תמיד ) נמוכה(הרצועה מעט צרה לפחות (בה בעזרת האצבע "פוגעים"

...)אני

?מישהו רואה את התפריט הנסתר

כותרת

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

קרובות וגדולות מאשר מטרות " מטרות)"לגעת ב("להשיג"קל יותר .רחוקות וקטנות

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

גדול ורחוק או קטן וקרובקטן ורחוק

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

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

Fitts’ Lawחוק פיטס

קל יותר קשה יותר

http://www.usable.co.il/archives/320

כותרת

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

Ynet

יצרו דף שמזכיר את המראה Ynet-בשל אתר האינטרנט

למרבה השמחה יישרו עבורנו את .שמות המדורים

: החסרונותחייבים , אפשר לעבור ממדור למדור-אי

".ערוצים"לעבור בעמוד ה

מספר המדורים מוגבל

כותרת

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

NY Times

בחרו להציג את החדשות NY Times-בבדומה לעיתונים ( Latest-האחרונות בואת כל שאר המדורים והמידע , )הישראליים

.More-שמו ב

Appleזהה לחלוטין לדוגמה של .iPod-מאפליקציית ה

The Marker ו-Zap משתמשים באותו.הפתרון

אם לא : חבל להמציא את הגלגל מחדש.היצמדו לסטנדרט, חייבים משהו אחר

כותרת

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

Uniqיוניק יו איי UI

השירותים של יוניק יו איי

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

. דפוס ועוד, מסחר אלקטרוני

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

http://services.uniqui.co.il/

http://sadna.uniqui.co.il

כותרת

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

המדריך לעולם חוויית המשתמש

אפשר להכיר את איפה רבים שואלים אותי אז . מסודרתתחום חוויית המשתמש בצורה

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

, "המשתמשהמדריך לעולם חוויית "הכנתי את דיגיטלי שאתם יכולים להוריד אליכם ספר

.ממש עכשיו

:כדי להוריד את המדריךuniqui.co.il/theguidehttp://

!תהנו

כותרת

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

ממשק אינטואיטיבי

"אינטואיטיבי"כולנו רוצים ליצור ממשק

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

כותרת

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

רסקיןף 'העכבר של ג

את 1994-סיפר ב, מי שהתחיל את פרויקט המקינטוש, )1943-2005( רסקיןף 'ג)http://bit.ly/raskin: המקור כאן(הסיפור הבא

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

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

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

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

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

.כפתור

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

.ויסטיק'כי הוא דמה להפעלה של ג" אינטואיטיבי"לתנועה על המסך היה לה

כותרת

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

"אינטואיציה"שימוש באלמנטים מוכרים מייצר

אנו מזהים את האלמנט המוכר ומייד יודעים כיצד לתפעל אותו

רכיבי ממשק סטנדרטיים הם כאלה

זה לא אומר שצריך לוותר על הייחוד של האפליקציהReloadאו " Undo"הצלמית כמו , כך קריא-הכפתור לא כל

כותרת

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

שימוש באלמנטים מוכרים מהעולם הפיזי

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

!מסובבים–אמת או חובה

כותרת

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

Context of Use הקשר שימוש

סביבה אנושית?מי האנשים שישתמשו במוצר

?מה היעדים שלהם בחיים?מה היעדים שלהם במוצר

סביבה פיזית? באיזה מקומות המוצר יופעל

? מה מאפיין את המקומות האלו

)פלטפורמה(סביבה טכנית ?איזה מכשירים

?איזה מערכות הפעלה

סביבת מוצרים?איזה מוצרים אחרים פועלים בתחום

?כיצד רגילים להשתמש בהם

כותרת

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

דוגמה להתאמה מצוינת להקשר שימוש

כותרת

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

?עם מה לאפיין

המדריך של אפל לממשק המשתמש באייפון -לקרוא ולשנן 1Cron9http://bit.ly/

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

Axure ,כולל , אפשר להשתמש בו כדי לדמות את האפליקציה הסופית500$-כ). דורש תכנות קל(מעברים באנימציה

Balsamiq , מאפשר לשרטט מסכים סטטיים עם פקדים סטנדרטיים80$-כ. במהירות

View :אם רוצים עברית Use System Fonts ...כלים אחרים

כותרת

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

?עם מה לאפיין

/http://www.uistencils.comיש גם את

כותרת

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

Templates, Stencils and More

ריכוז של הרבה כלים נוספים לאפיון

http://bit.ly/iphoneproto

http://bit.ly/iptemplates

כותרת

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

?)אחרי הפאנל(איך תגיעו מפה הביתה

כותרת

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

)או לפחות מפה שלה(יש לנו כבר תחתית Appstore-פי ה-על

כותרת

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

!תודה רבה”Waze“מתוך