1/10/2017

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

מיקום לוגו – אם הלוגו בעברית, מומלץ ליישר לימין או למרכז, תלוי בעיצוב.

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

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

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

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

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

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

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

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

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

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

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

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

תהנו,
רן

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