ארכיטקטורת מידע/תכנון ארכיטקטורת המידע

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

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

מושגי יסוד בתכנון אתר

1. מפת האתר "Blueprint" - אשר מראה את הקשר ואת הניווט בין הדפים, ויכול לשמש לארגון הניווט ולתיוג. בלופרינט ידוע גם בשם מפת האתר מכוון שהוא משמש כמערכת מנווטת של האתר. הדיאגרמה ומערכת הניווט מציגים את המידע שיתאים גם למפתחים וגם למשתמשים פשוטים.
2. עיצוב העמוד "Wireframe" - תפקידו העיקרי הוא להראות כמה הדף הוא עצמאי וכיצד תבנית האתר צריכה להראות.

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

Blueprints

דף מתוך אתר וואלה

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

מבט מעמיק ל Blueprint

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

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

ארגון ה Blueprint

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

WireFrame

כיתוב תמונה

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

יתרונות וחסרונות

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

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

מטרת WireFrame

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

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

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

יצירת WireFrame

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

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

דוגמאות למספר כלים:

1. Hot Gloo הדבק החם - תוכנה חינמית ( לעת עתה ) וקלה לתפעול המאפשרת בעזרת "גרור הדבק" לסדר את מרכיבי האתר, שילוב בין מרכיבי האתר,יצירת שכבות וכו'.
2. CACOO - תוכנה ידידותית המאפשרת למספר משתמשים ליצור, לשנות ולשלב רעיונות ב WireFrame בזמן אמת. בנוסף מאפשרת התוכנה להעתיק קודים ולשלב אותם בתוך אפליקציות האתר כגון Wikis ו Blogs . כל שינוי שמתבצע מעדכן את האתר בצורה אוטומטית.
3. Monckingbird - תוכנה פשוטה המאפשרת למתכנן האתר ליצור, לשנות, לקשר ולהציג שינויים שבוצעו ב WireFrame. של השינויים מתבצעים בזמן אמת.

סיכום WireFrame

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

מקורות

קישורים אינטרנטיים

• אתר המסביר את תהליך יצירת WireFrame מתוך אתר axure
• קישור לערך Website_wireframe מתוך ויקיפדיה בשפה האנגלית
• הסבר ודוגמאות ליצירת WireFrame מתוך אתר FatPurple

• קישור לאתר המכיל כלים חינמיים ליצירת WireFrame

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