תכנון ממשק המשתמש של ארנק kin

דרישות פרויקט

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

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

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

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

תכנון מבני IA של מסעות משתמשים

על סיפונה

משתמשים יכירו את הארנק דרך הבוט @KikTeam. זה מאפשר לנו להתחבר למה שמשתמשי Kik מכירים - מפטפטים - כדי להציג את החוויה החדשה הזו.

ארכיטקטורת מידע ארנק (IA) - בחינת מבנים שונים

בדקנו שני מבני IA אפשריים במהלך שני איטרציות של פרויקט זה.

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

האיטרציה הראשונה

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

לשני העמודים החדשים (היסטוריית רווחים ועסקאות) בדקנו שני דפוסי עיצוב קונבנציונליים:

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

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

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

האיטרציה השנייה

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

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

  1. איזון תאים ומידע על משתמשים.
  2. הצעות הכלכלה הדו צדדית - הזדמנויות להרוויח ולבלות.

השימוש במבנה זה אפשר לנו ליצור שתי רמות של היררכיה.

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

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

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

תסתכל ותרגיש

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

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

אנימציות ומעברים למסך

השתמשנו בשני סוגים של אנימציה

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

מעברים

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

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

אינטראקציות מיקרו

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

מקרי קצה

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

מה הלאה

קבלת משוב ממשתמש!

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