03 UX මූලධර්ම සහ තොරතුරු ගෘහ නිර්මාණ ශිල්පය
පරිශීලකයෙකුට වෙබ් අඩවියක් තුළ අතරමං නොවී, පහසුවෙන් තමන්ට අවශ්ය තොරතුරු සොයා ගැනීමට සලස්වන්නේ කෙසේද? අපි ඒ ගැන ඉගෙන ගනිමු.
තොරතුරු ගෘහ නිර්මාණ ශිල්පය (Information Architecture - IA)
Information Architecture යනු වෙබ් අඩවියක හෝ යෙදුමක තොරතුරු සංවිධානය කිරීමේ සහ ව්යුහගත කිරීමේ කලාවයි. එහි ප්රධාන අරමුණ වන්නේ පරිශීලකයින්ට තොරතුරු සොයා ගැනීමට සහ ඔවුන්ගේ කාර්යයන් සම්පූර්ණ කිරීමට පහසු කිරීමයි.
ප්රධාන සංකල්ප
Navigation (සංචලනය)
පරිශීලකයින්ට වෙබ් අඩවියේ විවිධ පිටු අතර ගමන් කිරීමට ඉඩ සලසන පද්ධතියයි. මෙනු, ලින්ක්ස්, සහ breadcrumbs ഇതിന് ഉദാഹരണങ്ങളാണ്.
Hierarchy (ධූරාවලිය)
වඩාත්ම වැදගත් තොරතුරු දෘශ්යමය වශයෙන් ඉස්මතු කර දැක්වීමයි. විශාල ශීර්ෂ පාඨ (Headings), වර්ණ සහ පිටුවේ ඉහළින්ම යමක් තැබීම මගින් මෙය සිදු කළ හැකිය.
වෙබ් අඩවි සිතියමක් (Site Map) ඇඳීම
Site Map යනු වෙබ් අඩවියේ සියලුම පිටු සහ ඒවා එකිනෙකට සම්බන්ධ වන ආකාරය පෙන්වන දෘශ්ය සැලැස්මකි. අපගේ "Student Notes Website" සඳහා සරල site map එකක් මෙසේ විය හැකිය:
|
+--- සටහන් පිටුව (Notes Page) --- (ලොග් වූ පසු)
| |
| +--- නව සටහනක් එක් කිරීම (Add Note Form)
|
+--- අප ගැන පිටුව (About Page)
|
+--- පිවිසුම (Login Page)
ප්රායෝගික ක්රියාකාරකම: Navigation Bar එකක් එක් කිරීම
දැන් අපි පරිශීලකයින්ට වෙබ් අඩවියේ සැරිසැරීමට උපකාර වන මූලික navigation bar එකක් අපගේ ව්යාපෘතියට එක් කරමු.
උපදෙස්:
- ඔබේ
student-notes-v2.htmlගොනුව විවෘත කරන්න. - පහත දැක්වෙන කේතයේ අලුතින් එකතු කළ කොටස එයට එක් කරන්න. මෙය
<body>ටැගයට පසුව සහ<h1>ටැගයට පෙර යෙදිය යුතුය. - ගොනුව
student-notes-v3.htmlලෙස අලුතින් save කරන්න.
HTML කේතය:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Notes</title>
</head>
<body>
<nav>
<a href="#">Home</a> |
<a href="#">Notes</a> |
<a href="#">About</a>
</nav>
<hr>
<h1>Welcome to Student Notes Website</h1>
<p>A simple place to store your notes online.</p>
<button>Login</button>
</body>
</html>
නව පිටපත (New Output):
ඔබේ වෙබ් පිටුවේ ඉහළින්ම දැන් navigation links පෙනෙනු ඇත.
Welcome to Student Notes Website
A simple place to store your notes online.