בניית מבנה ניווט אינטואיטיבי עבור אתרי הנדסה מורכבים

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

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

הבנת צרכי המשתמש והתנהגות

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

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

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

• מציאת מפרטים טכניים או גליונות נתונים
• הצגת פרויקטים שלמים על ידי התעשייה או המיקום
• הורדת קבצי CAD או 3D
• צור קשר עם מומחה לנושא
• מקרי קריאה או ניירות לבנים

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

בדיקת אופניים ועץ

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

תוכן חתירה Hierarchly

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

קטגוריות Top-Level

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

• (ב) ◄ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• (ב) ,0) ,SolutionsFLT:1 - הצעות ספציפיות בתעשייה, שירותים, יכולות
• (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• (FLT:0)CareersigsFLT:1) - פתיחת עבודה, תוכניות התמחות, סיפורי עובדים
• (FLT:0) ContactveFLT:1 - מיקומים של Office, טפסים חקירה, ספריות מומחים

Each top-level category should have no more than three levels of subnavigation. Beyond that, consider using search or faceted filtering instead of deeper menus.

צלב-פרזה ו-Tagging

תוכן הנדסי מתאים לעתים רחוקות לקטגוריה אחת.דף פרויקט עשוי להתייחס למסמכים טכניים, ונייר לבן עשוי לדון בפתרונות מרובים.יישם מערכת תג המאפשרת תוכן להופיע תחת נתיבי ניווט מרובים.לדוגמה, מקרה מחקר על רטרופיט גשר בקליפורניה יכול להימצא תחת FLT:0 מודולים > TransportFLT:1 ו-FLT2:2lutions & contentre; Structural; 3.

עיצוב הניווט

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

ניווט ראשוני (בעיקר תפריט)

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

ניווט שני

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

לחם

לחם הם חיוניים אתרי הנדסה מורכבים.הם להפחית את הניתוק על ידי מראה את הנתיב מן דף הבית ומאפשר למשתמשים לקפוץ בחזרה לקטגוריה ההורה. השתמש בסגנון "מיקום" (למשל, בית וגט; פרויקטים > תחבורה > תחבורה וgt; גשר שער הזהב) להימנע משימוש בלחם כתחליף להיררכיה ניווט נאותה - הם משלימים להרשות לעצמם.

ניווט

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

ניווט אחראי ונייד

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

תבניות מובייל

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

• תפריט:0 (Mega) על TabletFLT:1 - פריסה דו-קולונית המציגה קטגוריות וילדים לצד זה
• (FLT:0) ,bFLT:1 ; עבור אתרים עם כמה חלקים עיקריים, בר כרטיסה קבוע יכול לשמור על פעולות ליבה נגישות
• (בעמוד השדרה) (בעמוד השדרה) (במסמכים טכניים ארוכים, השתמש בקישורי קפיצות מקלות המגדירים לסעיפים

מטרות מגע וג'ים

כל רכיבי הניווט חייבים להיות מטרות מגע של לפחות 44×44 פיקסלים (המלצת Apple) או 48 פיקסלים (עיצוב החומרי של גוגל) להימנע מהסתמכות רק על טיפות מבוססות ריח; הם נכשלים על מגע. יישום קליקים פתוח עבור תת-מין, ולספק כפתור גלוי קרוב. מחוות Swipe יכולות לעבוד עבור קרלים אבל הם לא אמינים עבור תפריטים - כדי לצלצללים ו- מקללים.

תבניות ניווט מתקדמות לתכנים הנדסיים

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

Mega menus

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

חיפוש פנים וסינון

עבור אוספים גדולים - להקות של מסמכים טכניים או מחקרי מקרה הפרויקט - לשקול להחליף גלישה מסורתית עם חיפוש פנים. משתמשים יכולים לסנן על ידי חומר, תעשייה, שנה, או אזור. דפוס זה נפוץ באתרי מסחר אלקטרוני אבל בשימוש יותר ויותר בפורטל הנדסה. integrate Faceted תוצאות עם הניווט הראשי: כאשר משתמשים "פרויקטים & gt; תחבורה" להראות סינון עבור "טווח", "Budget", "טווח קצר", וכו '.

אתר Map Pages

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

ההיררכיה החזותית והקוס

ניווט הוא יותר מטקסט קישור - עיצוב חזותי מנחה את העין ומתקשר חשיבות.

סמלים וסמלים

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

צבע וטירפוגרפיה

השתמש צבע כדי להבחין ניווט ראשוני מקישורים תפריט משני. Main צריך צבע ייחודי (למשל, כחול כהה על לבן) כי נשאר עקבי ברחבי האתר. Active Page אינדיקטורים - צבע רקע שונה, תחתוני צבע או שינוי צבע - להפוך את המיקום הנוכחי של המשתמש ברור.עבור טיפוגרפיה, להבטיח קישור יש מספיק ניגוד (WC AAA המומלצת) והוא גדול יותר מ 16px על גבי ניווט נייד (משתמשים מצפים רק קישורים גלויים).

מדינות פעילות ו- Feedback

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

שיקולים

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

HTML ו- RIT

השתמש באלמנטים של HTML אשר מעבירים משמעות: היסוד של ה-FLT:0 (החומר עוטף אזורי ניווט) ו-FLT:1 / FLT:2 מבנים מייצגים פריטים בתפריט. for dropdowns, ApplyFLT 3 ו-FLT:4 כדי לציין אזורים שניתן להעלות על הדעת.

דלג קישורים ופסיביות

לספק קישור "Skip to Main content" כגורם הראשון להתמקד. השתמש בתפקידים ציוניים כמו FLT:5; FLT:6, ו-FLT 7 כדי לעזור לקוראים המסך לקפוץ בין קטעים.המשך תוויות ציון דרך ייחודית (למשל, "ניווט בסיסי" לעומת "ניווט שני").

ניהול ממוקד

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

בדיקות וניווט

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

בדיקות שימושיות

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

Analytics ו-Hickmaps

כלים כמו Google Analytics, Hotjar או Mouseflow חושפים היכן משתמשים לוחצים, מרחפים, ולמטה.חפשו תבניות כגון "קליקים טרה" (ד חוזר על קליקים על אלמנט בלתי ניתן ללחיצת לחץ) או שיעורי קפיצה גבוהים על דפים עמוקים בהיררכיה.אם משתמשים פותחים באופן עקבי את "צור קשר" מדף נחיתה "פרויקטים", לשקול הוספת קישור מגע בולט ישירות על דפי הפרויקט.

ניתוח Log Analysis

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

סירוב מוחלט

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

מסקנה: ניווט כקרן

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

(ב) לקרא נוסף, לחקור את ההנחיות של קבוצת נורמן (Nielsen Norman's ניווט) 1 (FLT:2WAI-OVA-59), ו-FLT:4Smashing Magazine כולל תבניות ניווט:2WAI-RIT:510).