Pembuatan AI dengan implementasi C++ (part 2)

Setelah kemarin kita bahas tentang komponen dasar pembuatan AI sekarang kita langsung terjun ke pemrogramannya...Seperti yang sudah dikatakan sebelumnya bahwa untuk membuat sebuah game kita membutuhkan basic matematika dan fisika yang kuat terutama untuk vektor (lihat kembali buku aljabar liniernya..) saya akan beri satu contoh file header untuk vektor 2d...
Untuk membuat projectnya buka visual studio - new - project - pilih visual c++ -pilih win32 project - pilih windows application...
disitu sudah tersedia contoh untuk windows application dasar (kita dapat merubahnya nanti) silahkan tekan f5 untuk melihat menu windownya...

Lalu di menu solution explorer klik kanan - add - header file - tuliskan namanya menjadi Vector2D.h...

sudah?

nah sekarang kita harus menuliskan kode program untuk semua operasi vector yang nantinya akan dipakai untuk menggambar lapangan, pergerakan pemain, dan pergerakan bola...

Vector2D.h

#ifndef VECTOR2D_H
#define VECTOR2D_H

#include
#include
#include
#include
#include "utils.h" //tar dibuat file header utils.h

struct Vector2D
{
double x;
double y;

Vector2D(): x(0,0), y(0,0){} // ctor tanpa parameter
Vector2D(double a, double b) : x(a),y(b){} // ctor dengan parameter

void Nol() {x=0,0; y=0,0;}

bool isNol()const {return (x*x + y*y)< MinDouble;} // nah MinDouble itu nanti ada di utils.h

inline double Length()const;

inline double Lengthsq()const; // bedanya klo Lengthsq tanpa pke sqrt (akar)

inline void Normalize();

inline double Dot(const Vector2D& v2)const;

inline int Sign(const Vector2D& v2)const; // Vektor memiliki arah, tujuannya untuk
//Menentukan arah vektor positif atau negatif

inline Vector2D Perp()const;

inline void Truncate(double max);

//Jarak antara vektor
inline double Distance(const Vector2D &v2)const;

//akarkan Vektor diatas.
inline double DistanceSq(const Vector2D &v2)const;

inline void Reflect(const Vector2D& norm);

//kembalikan nilai vektor yang direverse
inline Vector2D GetReverse()const;


//Overload operator
const Vector2D& operator+=(const Vector2D &rhs)
{
x += rhs.x;
y += rhs.y;

return *this;
}

const Vector2D& operator-=(const Vector2D &rhs)
{
x -= rhs.x;
y -= rhs.y;

return *this;
}

const Vector2D& operator*=(const double& rhs)
{
x *= rhs;
y *= rhs;

return *this;
}

const Vector2D& operator/=(const double& rhs)
{
x /= rhs;
y /= rhs;

return *this;
}

bool operator==(const Vector2D& rhs)const
{
return (isEqual(x, rhs.x) && isEqual(y,rhs.y) );
}

bool operator!=(const Vector2D& rhs)const
{
return (x != rhs.x) || (y != rhs.y);
}

};

//---------------------------------------------------beberapa overload operator
inline Vector2D operator*(const Vector2D &lhs, double rhs);
inline Vector2D operator*(double lhs, const Vector2D &rhs);
inline Vector2D operator-(const Vector2D &lhs, const Vector2D &rhs);
inline Vector2D operator+(const Vector2D &lhs, const Vector2D &rhs);
inline Vector2D operator/(const Vector2D &lhs, double val);
std::ostream& operator<<(std::ostream& os, const Vector2D& rhs);
std::ifstream& operator>>(std::ifstream& is, Vector2D& lhs);


//------------------------------------------------------------------------Fungsi member

//------------------------- Length ---------------------------------------
//
// returns the length of a 2D vector
//------------------------------------------------------------------------
inline double Vector2D::Length()const
{
return sqrt(x * x + y * y);
}


//------------------------- LengthSq -------------------------------------
//
// returns the squared length of a 2D vector
//------------------------------------------------------------------------
inline double Vector2D::LengthSq()const
{
return (x * x + y * y);
}


//------------------------- Vec2DDot -------------------------------------
//
// calculates the dot product
//------------------------------------------------------------------------
inline double Vector2D::Dot(const Vector2D &v2)const
{
return x*v2.x + y*v2.y;
}

//------------------------ Sign (penanda positif atau negatif----------------------------------
//
// Positif jika vektor searah jarum jam,
// negatif jika vektor berlawanan arah jarum jam (Y axis kebawah, X axis to kanan)
//------------------------------------------------------------------------
enum {clockwise = 1, anticlockwise = -1};

inline int Vector2D::Sign(const Vector2D& v2)const
{
if (y*v2.x > x*v2.y)
{
return anticlockwise;
}
else
{
return clockwise;
}
}

//------------------------------ Perpendicular ------------------------------------
//
// Prependicular vektor
//------------------------------------------------------------------------
inline Vector2D Vector2D::Perp()const
{
return Vector2D(-y, x);
}

//------------------------------ Distance --------------------------------
//
// calculates the euclidean distance between two vectors
//------------------------------------------------------------------------
inline double Vector2D::Distance(const Vector2D &v2)const
{
double ySeparation = v2.y - y;
double xSeparation = v2.x - x;

return sqrt(ySeparation*ySeparation + xSeparation*xSeparation);
}


//------------------------------ DistanceSq (jarak tanpa sqrt) ------------------------------
//
// calculates the euclidean distance squared between two vectors
//------------------------------------------------------------------------
inline double Vector2D::DistanceSq(const Vector2D &v2)const
{
double ySeparation = v2.y - y;
double xSeparation = v2.x - x;

return ySeparation*ySeparation + xSeparation*xSeparation;
}

//----------------------------- Truncate (pemotongan) ---------------------------------
//
// truncates a vector so that its length does not exceed max
//------------------------------------------------------------------------
inline void Vector2D::Truncate(double max)
{
if (this->Length() > max)
{
this->Normalize();

*this *= max;
}
}


//---------------------------REFLEKSI -------------------------------------
inline void Vector2D::Reflect(const Vector2D& norm)
{
*this += 2.0 * this->Dot(norm) * norm.GetReverse();
}

//----------------------- REVERSE ----------------------------------------
//
// returns the vector that is the reverse of this vector
//------------------------------------------------------------------------
inline Vector2D Vector2D::GetReverse()const
{
return Vector2D(-this->x, -this->y);
}


//------------------------- Normalize ------------------------------------
//
// normalizes a 2D Vector
//------------------------------------------------------------------------
inline void Vector2D::Normalize()
{
double vector_length = this->Length();

if (vector_length > std::numeric_limits::epsilon())
{
this->x /= vector_length;
this->y /= vector_length;
}
}


//------------------------------------------------------------------------Fungsi yang bukan //member vektor

inline Vector2D Vec2DNormalize(const Vector2D &v)
{
Vector2D vec = v;

double vector_length = vec.Length();

if (vector_length > std::numeric_limits::epsilon())
{
vec.x /= vector_length;
vec.y /= vector_length;
}

return vec;
}


inline double Vec2DDistance(const Vector2D &v1, const Vector2D &v2)
{

double ySeparation = v2.y - v1.y;
double xSeparation = v2.x - v1.x;

return sqrt(ySeparation*ySeparation + xSeparation*xSeparation);
}

inline double Vec2DDistanceSq(const Vector2D &v1, const Vector2D &v2)
{

double ySeparation = v2.y - v1.y;
double xSeparation = v2.x - v1.x;

return ySeparation*ySeparation + xSeparation*xSeparation;
}

inline double Vec2DLength(const Vector2D& v)
{
return sqrt(v.x*v.x + v.y*v.y);
}

inline double Vec2DLengthSq(const Vector2D& v)
{
return (v.x*v.x + v.y*v.y);
}


inline Vector2D POINTStoVector(const POINTS& p)
{
return Vector2D(p.x, p.y);
}

inline Vector2D POINTtoVector(const POINT& p)
{
return Vector2D((double)p.x, (double)p.y);
}

inline POINTS VectorToPOINTS(const Vector2D& v)
{
POINTS p;
p.x = (short)v.x;
p.y = (short)v.y;

return p;
}

inline POINT VectorToPOINT(const Vector2D& v)
{
POINT p;
p.x = (long)v.x;
p.y = (long)v.y;

return p;
}



// Overload Operator
inline Vector2D operator*(const Vector2D &lhs, double rhs)
{
Vector2D result(lhs);
result *= rhs;
return result;
}

inline Vector2D operator*(double lhs, const Vector2D &rhs)
{
Vector2D result(rhs);
result *= lhs;
return result;
}

//overload the - operator
inline Vector2D operator-(const Vector2D &lhs, const Vector2D &rhs)
{
Vector2D result(lhs);
result.x -= rhs.x;
result.y -= rhs.y;

return result;
}

//overload the + operator
inline Vector2D operator+(const Vector2D &lhs, const Vector2D &rhs)
{
Vector2D result(lhs);
result.x += rhs.x;
result.y += rhs.y;

return result;
}

//overload the / operator
inline Vector2D operator/(const Vector2D &lhs, double val)
{
Vector2D result(lhs);
result.x /= val;
result.y /= val;

return result;
}

///////////////////////////////////////////////////////////////////////////////



inline void WrapAround(Vector2D &pos, int MaxX, int MaxY)
{
if (pos.x > MaxX) {pos.x = 0.0;}

if (pos.x < 0) {pos.x = (double)MaxX;}

if (pos.y < 0) {pos.y = (double)MaxY;}

if (pos.y > MaxY) {pos.y = 0.0;}
}


inline bool NotInsideRegion(Vector2D p,
Vector2D top_left,
Vector2D bot_rgt)
{
return (p.x <> bot_rgt.x) ||
(p.y <> bot_rgt.y);
}

inline bool InsideRegion(Vector2D p,
Vector2D top_left,
Vector2D bot_rgt)
{
return !((p.x <> bot_rgt.x) ||
(p.y <> bot_rgt.y));
}

inline bool InsideRegion(Vector2D p, int left, int top, int right, int bottom)
{
return !( (p.x <> right) || (p.y <> bottom) );
}


inline bool isSecondInFOVOfFirst(Vector2D posFirst,
Vector2D facingFirst,
Vector2D posSecond,
double fov)
{
Vector2D toTarget = Vec2DNormalize(posSecond - posFirst);

return facingFirst.Dot(toTarget) >= cos(fov/2.0);
}





#endif
}

-bingung? baca lagi Pengantar C++ nya....
-Kenapa menggunakan C++ ? karena dia full support untuk OOP...
-beberapa operasi vektor pada kode diatas adalah jumlah operasi vektor yang sebenarnya (aljabar linear lanjutan)

Pembuatan AI dengan implementasi C++ (part 1)

Bagi para gamers yang penasaran dengan pembuatan AI (kecerdasan buatan) pada game itu seperti apa,sedikit penjelasan tentang design AI dan implementasinya dengan C++...

Kebetulan ini menjadi topik skripsi saya yaitu otomasi AI dengan voice command, berhubung voice command nya belum dibuat, jadi saya cerita tentang AI nya dulu..

Ok,..pertama basic matematika dan fisika kita harus kuat (yang gak kuat belajar lagi kayak saya) terutama tentang koordinat cartesian, fungsi2, trigonometri lalu vektor..beberapa developer game menyebut vektor adalah "sahabat" karena jika game tersebut berbasis 2D maka kita menggunakan vektor 2D jika 3D? ya vektor 3D...
untuk basic fisikanya, masih ingat s = v.t? itu adalah rumus menghitung jarak s(jarak) = v(kecepatan) * time (waktu), serta rumus2 percepatan, gravitasi dll....

itu untuk basic matematika dan fisikanya..sekarang kita masuk ke bagian AI nya,,

pernah dengan FSM? itu adalah sebutan mutlak untuk para developer game yaitu Finite State Machine atau kondisi AI nya... sebagai contoh adalah game PacMan,..dalam game PacMan ada beberapa kondisi :
1. Jika PacMan belum makan Bulatan maka setan akan mengejar dan PacMan menghindar
2. Jika sudah makan Buletan maka PacMan mengejar, setan menghindar..

atau contoh yang lebih mudah adalah sebuah lampu:
1. Jika saklar Off maka lampu mati
2. Jika saklar On maka lampu hidup..

udah jelas? kebayang kan berapa state yang dibuat jika ingin membuat game yang komplex?
untuk implementasinya perhatikan script berikut :

enum StateType

void Agent:: UpdateState (StateType CurrentState)
{
switch (CurrentState)
{
case state_kabur;
HindariMusuh();
if (Safe())
{
ChangeState(state_siaga);
}
break;

case state_siaga;
IkutiAlur();
if(bahaya())
{
if(MusuhlebihLemah())
{
ChangeState(state_serang);
}
else
{
ChangeState(state_kabur);
}
}
break;

case state_serang;
if(MusuhlebihKuat())
{
ChangeState(state_kabur);
}
else
{
HancurkanMusuh();
}
break;
}
}

script C++ diatas adalah script dasar dari game DotA (Defense of the Ancient),tapi scriptnya gak semudah itu lho...masih banyak script2 lainnya yang belum saya pelajari...

ok itu untuk FSM nya....

sekarang kita masuk ke Agent..
disini anda harus mengerti Autonomous Agent..apa itu???
Autonomous Agent adalah AI yang dapat berinteraksi dengan lingkungannya...
misal dalam game, Ada ranjau didepan prajurit, tetapi prajurit berhasil menghindar, berarti si AI prajurit itu bisa berinteraksi dengan lingkungan,buktinya dia bisa tau ada ranjau didepan...
karena AI itu kita buat berdasarkan pengetahuan maka AI tidak bersifat Omnisscience (serba tahu) kita tidak dapat menyalahkan AI jika dia salah persepsi, karena AI diciptakan berdasarkan pengetahuan dari kita..(berarti klo AI salah, salahin juga yang buatnya.hehehe)....

ok, didalam implementasi C++ para developer game telah sepakat menentukan komponen2 yang akan dipakai untuk pembuatan game (khususnya AI)..diantaranya :
MovingEntity, BaseGameEntity, SteeringBehavior, GroupBehavior,dll..
jika ingin dilihat Class Diagramnya..monggo..


silahkan dicoba codingannya sendiri,,,kalau ada salah design mohon maaf ya,.namanya juga baru belajar...
selesai part 1 kali ini, karena ane udah pegel ngetik + ngantuk,,,nanti disambung lagi dipart 2 yah...

CARA MENAMPILKAN DATA DARI WINDOW 1 KE WINDOW 2 DENGAN WPF C#

Cuma mau sharing ilmu bekas PKL nih....
Mau sharing tentang passing data antar window di WPF app C#.net..
Sebenarnya simple aja...cuma mw nampilin nama yang kita ketikkan di window 1 dan akan tampil di window 2..
sebenarnya hal ini sangat sederhana, tetapi kalo kita membutuhkan data-data yang ada di window 2? mau tidak mau kita harus melakukan passing data ini...
Kasusnya simple.. yaitu user akan disuguhkan (Makanan kale....) sebuah logon window dimana user harus memasukkan username dan password yang sudah terdaftar..
lalu, setelah user memasukkan username maka username itu akan di window 2 seperti berikut "logged as 'username'"....

OK, langkah pertama yang harus dilakukan adalah merubah class modifier window menjadi public.Caranya adalah :

Window x:Class="Project.Window2" x:classModifier:"public" ...



jika code anda sudah seperti ini, selamat anda berhasil merubah class modifier window ini...

langkah kedua yang harus dilakukan adalah buat database di SQL SERVER,(caranya tinggal bikin di SQL SERVER 2008 management studio)
misal bikin table namanya 'user' dengan item 'nama' dan 'password'..

ok, langkah ketiga buka visual studio 2010, lalu new project, lalu pilih wpf application...
setelah MainWindow.xaml terbuka langsung click kanan->view code.. maka akan tampil barisan code C# sebagai pengisi fungsi dari xaml..
langsung saja tambahkan using System.Data; dan using System.Data.SqlClient;
lakukan koneksi ke database caranya click kanan Data Connections pada server explorer ->add connection, lalu isikan nama server (nama komputer anda)
pada kotak server name. lalu pilih database yang baru tadi kita buat, sebelum click ok ada baiknya jika kita test koneksinya dulu dengan cara click
Test Connection.Jika semua sudah berjalan dengan lancar maka click Ok..



langkah keempat adalah bangun koneksi pada database yaitu dengan cara :

sqlconnection conn = new sqlconnection(@"string connection bisa anda lihat di property connection;");

lalu buat sqlDataAdapter

sqlDataAdapter adp = new sqlDataAdapter();

dan buat data set

DataSet ds = new DataSet();

ketiga codingan diatas ini taruh di dalam class Window.


langkah keempat adalah double click objek button "login" pada design view xaml, maka akan tertulis

private void button1_Click(object sender, RoutedEventArgs e) {}

kita sudah membuat event "Click" pada button1 dan kita tinggal mengisinya..

Biasakanlah memakai (try{} catch{} finnaly{}) karena untuk keamanan koneksi jika koneksi berhasil maka akan masuk ke try, jika gagal kita dapat menambahkan

catch(sqlException ex)
{
messageBox.Show(ex.message); // ini untuk menangkap pesan error sehingga program kita tidak crash atau hang...tetapi akan ditampilkan pesan error
}

langkah kedua bersambung...

USED OIL MANAGEMENT SYSTEM

System ini sebenarnya berguna untuk memberikan kemudahan (bagi pegawai2 disana) untuk membuat laporan yang akan diserahkan kepada perusahaan client.

PT ISSI (Intelab sentra solution indonesia) adalah perusahan yang mengelola petroleum equipment dan oil analysis.

yang pertama adalah petroleum equipment, PT ISSI menjual equipment untuk keperluan perusahaan lain (misal : pertamina dll)
alat yang dijual oleh mereka diberi serial number satu persatu agar bisa di data barang apa saja yang keluar...
masalahnya teknologi yang dipakai perusahaan ini masih sangat tradisional (tulis tangan), jika ada 1000 barang yang keluar
berarti mereka harus menulis data alat sebanyak 1000 kali..

Maka dari itu dibuatlah software dengan nama Inventory system yang dibuat oleh rekan saya Gamma satria kurniawan.

Nah yang kedua adalah oil analysis,bertujuan untuk menganalisis kondisi alat yang dijualnya dan memberikan laporan
kepada client setiap 1 minggunya.Jadi perusahaan ini juga menyediakan maintenance untuk alat yang dijualnya.
Alat-alat tersebut nantinya akan di attach ke PC dan mengeluarkan data berupa .csv atau .txt sebanyak 7 file.
setiap file .csv atau .txt memiliki 12 parameter dan empat digit (misal 0,004) setiap valuenya.lalu dianalysis ke pakar
dan memberikan kesimpulan atau saran dari alat tersebut.
teknologi yang dipakai diperusahaan ini masih sangat tradisional (input satu persatu data CSV,lalu tanya kepada pakar dan
menyusun ulang format laporan). hal ini membuat laporan yang akan diserahkan kepada client sering terlambat.Jika ada 300 alat
yang dianalisis setiap minggunnya maka berapa data yang harus diinputkan oleh mereka? (hitung sendiri.hehehehe)

Used oil management system (software yang sedang saya bangun) berguna untuk mengenerate data .csv dari alat secara otomatis
dan memindahkan pengetahuan yang ada di pakar kedalam sistem.

Mengenerate data .csv ke form secara otomatis



pilih Upload file, lalu akan muncul



setelah itu



semua data yang ada di file csv akan tergenerate ke form yang kita inginkan.

software ini masih dalam tahap pengembangan,masih banyak yang harus saya kerjakan..

Membuat RIA dengan PHP + Mysql + Silverlight

Akhirnya saya menemukan cara baru untuk integrasi php dan silverlight...
kalo pada postingan sebelumnya saya belum bisa melakukan koneksi ke database
sekarang sudah bisa dengan mysql tanpa perlu membuat WSDL...

pertama :

buat database anda di mysql..
mudah kan?


kedua :

sekarang kita buat web servicenya di PHP
contoh :

mysql_vars.php
$dbUsername = "root";
$dbPassword = "";
$db = "product";
$sever = "localhost";

$mysql_namaproduct = "nama_product";
$mysql_contentproduct = "content_product";
$mysql_ idproduct = "id_product";

$connection = mysql_connect ($server, $dbUsername,$dbPassword);

function formatinput($rawURLData)
{
$returnString = urldecode($rawURLData);
$returnString = mysql_real_escape_string($returnString);
return $returnString;
}
?>

web service ini nantinya akan dipanggil melalui silverlight


ketiga :

buat fungsi getter setter di class product pada C#

public class TakeProduct
{
public String ProductName {get; set;}
public String IsiProduct {get; set;}
public int IdProduct {get; set;}

public TakeProduct() {}
}

lalu coba right-click pada listbox dan "Edit Additional Templates" ->Edit Generate Item (pada Blend)


keempat :

cabut ke MainPage.Xaml.cs lalu ketik script berikut:

WebClient wc = new WebClient();
ObservableCollection myProduct = new ObservableCollection();
string baseURI = “http://localhost/"phpfile anda";

oh iya jangan lupa tambahkan (using System.Net dan using System.Collections.ObjectModel;


lalu ketik script dibawah InitializeComponent() "wc.DownloadStringComplete +=" tekan TAB dua kali..event akan tergenerate dengan sendirinya
lalu ketik lagi script tepat dibawah wc.DownloadStringComplete, "wc.DownloadStringAsync(new Uri(baseURI + “file php anda”));

tekan F5 insya allah jalan....
Alhamdulillah dengan cara ini pekerjaan saya akan semakin mudah untuk membangun web yang expresif,cepat,dan aman...

Membuat RIA (Rich Internet Application) dengan integrasi Silverlight dan PHP

Sebenarnya kajian PKL saya simple..hanya membangun sebuah web.Tetapi masalahnya adalah
dari pihak perusahaan meminta web yang expresif, komunikasi data cepat dan data aman pastinya (Maklum CEOnya perfectsionis)..
pertama saya berpikir untuk memakai adobe flex builder...tetapi software tersebut tidak menjamin komunikasi data
dan keamanan data karena adobe flex builder tidak bisa dengan instan connect ke database...

Lalu saya berpikir lagi dengan menggunakan PHP,saya menemukan beberapa kemudahan dalam komunikasi data dan
keamanan yang handal dalam PHP, tetapi saya kesulitan dalam membuat Interface dari webnya (pke dreamweaver belum begitu
ngerti...hehehehe.katro)

Terlintas dipikiran saya sebuah ide yang cemerlang (gaya beut)...Tahu expression blend dan silverlight?
yap, software tersebut sangat handal membuat interface dengan kemudahan yang disediakan oleh expression blend
dan silverlight library untuk mempercanggih interface tersebut..lalu saya mengambil kehandalan PHP dalam komunikasi
data dan keamanan data..saya berhasil memadukan .NET dengan PHP...

Langkah pertama saya bagi komponen web menjadi dua bagian (Server-side dan Client-side)
pada server-side saya menggunakan PHP untuk mengontrol data pada database..
pada client-side saya menggunakan .NET untuk membangun interface yang keren...

langkah kedua saya merubah sedikit codingan pada index.php (C:\wamp\www\index.php) untuk menginclude
silverlight XAP package..
lalu buat file WSDL baru..apa itu WSDL (Web Service Description Language)
yaitu untuk mendeskripsikan network service sebagai kumpulan endpoint
WSDL ini berbasis XML..

lalu saya membuat server pada PHP dengan WSDL tersebut...

ini_set("soap.wsdl_cache_enabled", "0");
$server = new SoapServer("issiweb.wsdl");
$server->addFunction("loginsystem");
$server->handle();

simpan file yang sama dengan file wsdlnya... issiweb.php
lalu test dengan membuka browser ketikkan http://localhost/php/issiweb.wsdl
jika ada tampilan service dari wsdl berarti koneksi php telah berhasil.

lalu buka visual studio dan expression blend,..mulai buat interfacenya


setelah semuanya beres..copy aplikasi silverlight yang dibuat tadi ke directory PHP..
(catatan : project akan run pada port yang berbeda, kan biasanya port 80)...

lalu klik kanan pada project (di visual studio), properties, pilih web tab,
pilih use local IIS web server option, dan masukan path servernya..
tekan F5 insya Allah jalan...

untuk sementara selama dua minggu PKL baru ketemu itu...hehehe

ANALISIS WEB USABILITY PADA MAXIKOM (2)

3.Tidak ada keterangan halaman

Pada home di web ini akan diberikan beberapa sample buku, tetapi tidak ada keterangan beberapa sample buku itu adalah apa? apakah best seller? apakah top rated? apakah most viewed?. Pada web ini hanya diberikan rating 1-5 tetapi sample buku tersebut itu apa? jika mengacu kepada amazon.com yang menampilkan status pada sample buku (best book of the year, best book of the month,dan rekomendasi), maxikom masih jauh dari usable dalam hal ini.



www.maxikom.co.id


bandingkan dengan


www.amazon.com









4. Desain header berantakan

Pada umumnya web memiliki menu home,content,contact us, about us yang terletak dibawah judul.Tetapi dimana letak home,about us pada maxikom? yap, teletak di kiri atas dan tidak diberi border.Hal ini sangat tidak biasa bagi user.sedangakan untuk mencapai web yang usable, sebuah web harus memiliki sistem yang biasa dilihat user (familiarity) dan mudah diingat (.posisi header pada kiri atas adalah posisi yang tidak biasa dilihat user, dan user harus mengingat kembali sistem anda (Don't make them think).



(Desain header yang tidak biasa)