קטגוריות


כרטיס ל-UX: השראות וכיווני חשיבה על כרטיסיות למובייל

פומיקה

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

1-pI3d6mbBfL4A4SUEKSA1SQ

(UX Design)

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

תוציאי אותי מהקופסא: Look and Feel

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

apple

(Emre Korkmaz)

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

nike_cards

(Rajith Alingal)

weed_50_

הדגמה קונספטואלית נוספת למיקום אייטמים מרכזיים מחוץ לגבולות הכרטיסייה (uixNinja)

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

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

previewer_app

(ILLUSTRATE – X)

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

date2

(joaocorreia)

מזמינה אתכם לזוז: תנועה בין כרטיסיות

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

movie_app2

(Samuel Medvedowsky)

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

ui17

(CZECH)

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

juuce (1)

(Sergii Petakh)

הולכת מעבר: כרטיסיות שמקבלות תפקיד חדש בממשק

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

flo-app

(INNOCENCE LOST)

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

untitled-6

(Kiran6390 )

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

invision-projects-ios

(Charles Patterson)

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

shopping_app

(Anders)

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

open-uri20150211-11-1xueh7l

(Sergey Valiukh)

גם ב- google newsstand משתמשים במעבר בין כרטיסייה ל-header כדי להדגיש היררכיה. 

google_newsstand_like_navigation_pattern

(Aurélien Salomon)

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

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

 

 

צוות בלוג פומיקה מביא לכם חדשות ומידע על כל מה שחדש ומעניין בעולמות העיצוב וה-UX