Bästa placering och form på knappar i webbformulär

För att veta vilken modell av interaktionsdesign som kommer ge bäst resultat är det en bra ide att genomföra tester på olika förslag. Luke Wroblewski och Etre har gjort en sådan, där de undersöker hur man placerar primära och sekundära knappar i ett webbformulär få bästa sätt.

Man gjorde fem olika varianter som testpersoner fick i uppgift att lösa så fort som möjligt. Med hjälpt av Eye-tracking-teknik har man undersökt hur försökspersonernas blick rörde sig över skärmen.

Här under kan ni se en bild som vi har lånat från artikeln. Något jag är förvånad över är att alternativ B gick snabbast att för användarna att klara av. Eftersom knapparna har exakt samma form, och endast texten skiljer dem åt, så verkar det som att man inte behöver fundera på knapparnas innebörd lika länge.

Efter försöket säger många dock, att de anser att olika design på knapparna (som i exempel C där Cancel-knappen grå) är bättre, eftersom det motverkar att man klickar fel av misstag.

Submit Cancel Placement

InUseful har också skrivit bra reflektioner över testet på svenska.

By Jesper Lind

Små förändringar i webbformulär kan öka din omsättning enormt

Att lägga stor vikt på att utforma webbformulär är något som ofta förbises vid webbdesign. Man ser det inte så viktigt hur inloggningsformulär och och registreringssidor ser ut. Istället satsar man på virala reklam-jippon eller dyra Adwords-kampanjer för att få fler besökare och större intäkter på sina webbplatser.

Åtminstone har det varit så innan, den nya web2.0-filosofin är ju fokuserad på användaren och dess behov, så nu börjar webbutvecklare få upp ögonen för hur viktigt det är, att ha en användarvänlig design. Se bara på de där överdimensionerade inmatningsfälten som börjar bli så vanliga.

Genom att veta hur man designar ett formulär på bästa sätt, så kan man öka intresset för sin webbtjänst, eller öka försäljning om det handlar om en e-handelsajt. CSS-experten Eric Meyer berättar i en intervju att en handelsida ökade sin försäljning med hundra-tusentals dollars – bara genom att ändra på två inmatningsfält.

Då hade nog den sajten rätt stor omsättning innan, men den positiva effekten på en sån liten ändring är väldigt intressant och något varje webbplatsägare bör ägna en tanke på.

By Jesper Lind

Posta form-data till en extern URL

Jag kommer ihåg när man jobbade med klassisk ASP, och gick över till ASP.NET, att begreppet PostBack var rätt förvirrande. Typ: "Vadå ska varje sida posta tillbaks till sig själv?" Efter ett tag förstod man finessen och nu skulle skulle jag inte vilja byta tillbaks till hur föregångaren fungerade.

Ibland vill man dock kunna posta data från ett formulär till en annan URL, speciellt när man har att göra med betalväxlar (t ex Postens betalväxel), som ofta fungerar så.

PostBackUrl

I ASP.NET 1.1 var det rätt begränsade möjligheter men i 2.0 fick vi attributet PostBackUrl som kan sättas på Button, LinkButton och ImageButton. Har aldrig använt det själv men borde fungera bra.

HttpWebRequest

Med HttpWebRequest kan man skicka webbströmmar med data. Passar bäst om man vill att postningen ska ske i bakgrunden om jag förstått det rätt, och inte lika bra om man vill att webbläsaren ska följa URLen, som postningen sker till. Jag kan ha fel här för har inte provat så mycket med denna metod. Här är ett exempel som verkar rätt lätt att förstå.

Med JavaScript

Man kan lägga till ett extra formulär på sidan och posta detta genom att registrera ett javascript, från koden bakom, ungefär så här.

string sendScript = "<script language='javascript'>document.getElementById('paymentform').submit();<"+"/script>";
Page.RegisterStartupScript("SendPayment", sendScript);

På det extra formuläret anger man den externa URLen i action och variablerna som hidden-inputs.

<form id="paymentform" name="paymentform" action="https://thepaymentservice.domain" method="post">
<input type="hidden" id="Card_num" runat="server">
<input type="hidden" id="Currency" runat="server">
<input type="hidden" id="Amount" runat="server">
</form>

Eller så bygger man formuläret själv

Här är ett exempel på hur man kan använda HttpContext för att helt enkelt bygga ihop formuläret själv med html-taggar. Det är skrivet av Jigar Desai och finns att ladda hem på C# Corner.

Här kommer lätt modifierad variant:

using System;
using System.Web;
using System.Text;
using System.Collections.Specialized;

/// <summary>
/// Summary description for RemotePost
/// </summary>

public class RemotePost
{
private NameValueCollection inputs = new NameValueCollection();

private string url = string.Empty;
public string Url
{
set{ url = value; }
}
private string method = "post";
private string formName = "form1";

public void Add(string name, string value)
{
inputs.Add(name, value);
}

public void Post()
{
HttpContext.Current.Response.Clear();

StringBuilder sb = new StringBuilder();

sb.Append("<html><head>");

sb.Append(string.Format("</head><body onload=\"document.{0}.submit()\">", formName));
sb.Append(string.Format("<form name=\"{0}\" method=\"{1}\" action=\"{2}\" >", formName, method, url));

for (int i = 0; i < inputs.Keys.Count; i++)
{
sb.Append(string.Format("<input name=\"{0}\" type=\"hidden\" value=\"{1}\">", inputs.Keys[i], inputs[inputs.Keys[i]]));
}

sb.Append("</form>");
sb.Append("</body></html>");

HttpContext.Current.Response.Write(sb.ToString());

HttpContext.Current.Response.End();
}
}

Man anropar klassen så här:

RemotePost remotePost = new RemotePost();
remotePost.Url = "http://theRemoteDomain/Page.aspx";
remotePost.Add("field1","This is my first value");
remotePost.Add("field2","And another one");
remotePost.Post();

By Jesper Lind

Validera kreditkortsnummer med Luhn's algoritm

Jag har under några år använt en funktion för att validera kreditkort på diverse projekt. Hittade den som exempel i någon bok som jag glömt namnet på.

Blev lite nyfiken på ursprunget och genom en sökning på Google, hittade jag exakt samma exempel i en artikel på The Code Project. Där finns även ytterligare användbar kod för hur man kan kontrollera vilken typ av kreditkort ett kortnummer hör till.

Man får även reda på att funktionen jag pratade om, använder Luhn's algoritm utvecklad av Hans Peter Luhn år 1954.

Implementeringen för att kontrollera kreditkortsnummer ser ut så här:

private static bool ValidateCardNumber(string cardNumber)
{
try
{
// Array to contain individual numbers
System.Collections.ArrayList CheckNumbers = new ArrayList();
// So, get length of card
int CardLength = cardNumber.Length;

// Double the value of alternate digits, starting with the second digit
// from the right, i.e. back to front.
// Loop through starting at the end
for (int i = CardLength - 2; i >= 0; i = i - 2)
{
// Now read the contents at each index, this
// can then be stored as an array of integers

// Double the number returned
CheckNumbers.Add(Int32.Parse(cardNumber[i].ToString()) * 2);
}

int CheckSum = 0; // Will hold the total sum of all checksum digits

// Second stage, add separate digits of all products
for (int iCount = 0; iCount <= CheckNumbers.Count - 1; iCount++)
{
int _count = 0; // will hold the sum of the digits

// determine if current number has more than one digit
if ((int)CheckNumbers[iCount] > 9)
{
int _numLength = ((int)CheckNumbers[iCount]).ToString().Length;
// add count to each digit
for (int x = 0; x < _numLength; x++)
{
_count = _count + Int32.Parse(
((int)CheckNumbers[iCount]).ToString()[x].ToString());
}
}
else
{
// single digit, just add it by itself
_count = (int)CheckNumbers[iCount];
}
CheckSum = CheckSum + _count; // add sum to the total sum
}
// Stage 3, add the unaffected digits
// Add all the digits that we didn't double still starting from the
// right but this time we'll start from the rightmost number with
// alternating digits
int OriginalSum = 0;
for (int y = CardLength - 1; y >= 0; y = y - 2)
{
OriginalSum = OriginalSum + Int32.Parse(cardNumber[y].ToString());
}

// Perform the final calculation, if the sum Mod 10 results in 0 then
// it's valid, otherwise its false.
return (((OriginalSum + CheckSum) % 10) == 0);
}
catch
{
return false;
}
}
By Jesper Lind

Vi behöver säkrare kreditkortshantering

Över 45 miljoner kreditskortsnummer har blivit stulna från klädkedjan TJX och det är förmodligen den största kreditkortsläckan någonsin, skriver Lars Olofsson.

Säkerhetstjänsten Stolen ID Search som vi har rapporterat om tidigare, borde alltså fått ett rejält uppsving i sina affärer. Deras affärsidé går ju ut på att söka upp kreditkortsuppgifter som hamnat i fel händer och hjälpa individer som drabbats.

Det är väl endå uppenbart att det nuvarande kreditkortssystemet inte fungerar särskilt bra. Säkerheten måste ökas för att e-handelkunder ska kunna handla säkert.

By Jesper Lind

QuickSSL - överdrivet hög säkerhet men väl fungerande

Fick ett varningsmail från leverantören av SSL-certifikatet på en webbplats jag har hand om. Mailet sa att det bara är 7 dagar kvar och det kändes lite stressande. Utan certifikatet slutar den säkra kassan att fungera som är så viktigt för e-handelsidan. Eftersom den person på webbhotellet som har hand om det i vanliga fall är på lång semester så fick jag ta tag i förnyelsen själv.

Det hela visade sig vara en rätt omfattande process med cirka 13 steg eller så. I min inkorg finns nu 5 stycken mail med info om verifiering och bekräftelse. Ett något mer udda steg var när jag fick ange telefonnummer och blev uppringd av en automatisk telefon. Där fick jag mata in ytterligare en säkerhetskod och även lämna ett prov på min röst.

Hur som helst gick hela processen väldigt bra och jag fick hela tiden välskrivna instruktioner. Här finns t ex ett exempel på hur man installerar SSL på en IIS-server. Många av de var på svenska men saknade dock rätt tecken-kodning så man fick gissa sig fram på ÅÄÖ.

Jag kan varmt rekommendera GeoTrust om du behöver ett SSL-certifikat. Det fungerar väldigt bra, även om säkerhetstänket har gått lite över styr.

Recension från en annan som lämnar ungefär samma betyg går att läsa här.

By Jesper Lind

Designa t-shirts online

TechCrunch skriver om att företaget GoodStorm släpper en flash-applikation där man kan designa sina egna t-shirts.

Flash verkar vara den populäraste tekniken för denna typ av tjänster. Tyska Spreadshirt har en liknade tjänst för design av kläder.

Även TheShipLab använder flash men här handlar det om att designa pokermarker. För att använda deras applikation måste man vara medlem så den har jag inte provat.

Ge oss gärna tips på fler såna här tjänster om du känner till några.

Om du är flashutveckare och har erfarenhet av att skapa såna här applikationer, kontakta oss gärna eftersom vi kan ha ett jobb att erbjuda. Det underlättar ifall du finns i Göteborgsregionen.

By Jesper Lind

Är dina kreditkortsuppgifter på drift?

http://www.codeodyssey.se/upload/resource/blog/stolenidlogo.jpg

Silicon Valley företaget Trusted ID, lanserar nu tjänsten Stolen ID Search, där man kan göra sökningar på sitt kreditkortsnummer för att se ifall det har hamnat i orätta händer. De samlar dessa data i nätets mörkaste gränder där kriminella utbyter uppgifter, och säger sig ha över två miljoner kreditkortsnummer i sina register.

Man erbjuder även sedan ett år tillbaka IDFreeze som är en aktiv säkerhetstjänst där de hjälper konsumenter att skydda sin identitet och betalningsuppgifter mot en årsavgift på ca 600 kr.

Här på Code Odyssey jobbar vi mycket med e-handel och kommer ofta i kontakt med oroliga kunder som har frågor rörande säkerhet på internet. I dessa tider med nordeabrev och ett allt ökande nätfiske är det naturligt att många känner sig otrygga när de handlar på internet.

Ibland händer det att webbplatser vi jobbar åt blir måltavla för bedrägeriförsök, alltså att kriminella försöker använda stulna uppgifter. Oftast tar bankerna hand om detta men ibland får man rycka in som extra detektiv. Då kan Stolen ID Search vara ett bra verktyg att ha arsenalen.

Men man måste påpeka att det gäller att vara väldigt försiktig på nätet. I vanliga fall skulle vi inte rekommendera att skriva in några uppgifter på någon liknande tjänst. Stolen ID Search verkar dock vara riktigt seriös och eftersom man endast skriver in själva kortnummret så är det ingen fara. För att använda ett kort i bedrägerisyfte behöver ju skurkarna ha fullständiga uppgifter så som personuppgifter, säkerhetsnummer och giltighetsdatum.

Via: TechCrunch

 

By Jesper Lind

Växelkurser med Web Service del 2

Jag skrev för ett tag sen om hur man kan lägga till en web service till sitt projekt och hämtar ut växelkurser.

Nu tänkte jag prova en annan tjänst från Webservicex.net. Exemplet hittade jag i den danska bloggen Walk the walk.

Instruktioner
Lägg till följande web service och ange net.webservicex.www som namnrymd: http://www.webservicex.net/CurrencyConvertor.asmx

Koden


<%@ Page Language="C#" Trace="false" validateRequest="false" EnableSessionState="True" EnableViewState="true" SmartNavigation="false"%>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="net.webservicex.www" %>
<script Language="c#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{

if (!Page.IsPostBack)
{
DataTable dt = this.GetCurrencies();
ddlFromCurrency.DataSource = dt;
ddlFromCurrency.DataBind();
ddlTooCurrency.DataSource = dt;
ddlTooCurrency.DataBind();
}
}

protected void ddlTooCurrency_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlFromCurrency.SelectedValue.Length > 0)
{
double total = this.GetCurrency() * 100;
lblPrice.Text = total.ToString();
}
}

protected void ddlFromCurrency_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlTooCurrency.SelectedValue.Length > 0)
{
double total = this.GetCurrency() * 100;
lblPrice.Text = total.ToString();
}
}

private double GetCurrency()
{
CurrencyConvertor cc = new CurrencyConvertor();
return cc.ConversionRate((Currency)Enum.Parse(typeof(Currency), ddlFromCurrency.SelectedValue), (Currency)Enum.Parse(typeof(Currency), ddlTooCurrency.SelectedValue));
}

protected DataTable GetCurrencies()
{
DataTable dtCur = new DataTable("currency");
dtCur.Columns.Add("cur");

foreach (string name in Enum.GetNames(typeof(Currency)))
{
DataRow r = dtCur.NewRow();
r["cur"] = Enum.Parse(typeof(Currency), name);
dtCur.Rows.Add(r);
r = null;
}
return dtCur;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Real time curreny in ASP.NET</title>
<link rel="stylesheet" href="../example.css" type="text/css" />

</head>

<body>
<form runat="server">
<div id="content">
<b>Currency example using web service in ASP.NET</b>
<br /><br />

<table width="30%" border="1" cellpadding="2" cellspacing="0">
<tr>
<td>From currency</td>
<td><asp:DropDownList AutoPostBack="true" DataValueField="cur" DataTextField="cur" ID="ddlFromCurrency" runat="server" OnSelectedIndexChanged="ddlFromCurrency_SelectedIndexChanged" /></td>
</tr>
<tr>
<td>To Currency</td>
<td><asp:DropDownList AutoPostBack="true" DataValueField="cur" DataTextField="cur" ID="ddlTooCurrency" runat="server" OnSelectedIndexChanged="ddlTooCurrency_SelectedIndexChanged" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Label ID="lblPrice" runat="server" /></td>
</tr>
</table>

</div>
</form>
</body>
</html>

Länk till sida som visar kurser i real-tid

Fullständig lista över länder och betäckningar

AFA-Afghanistan Afghani
ALL-Albanian Lek
DZD-Algerian Dinar
ARS-Argentine Peso
AWG-Aruba Florin
AUD-Australian Dollar
BSD-Bahamian Dollar
BHD-Bahraini Dinar
BDT-Bangladesh Taka
BBD-Barbados Dollar
BZD-Belize Dollar
BMD-Bermuda Dollar
BTN-Bhutan Ngultrum
BOB-Bolivian Boliviano
BWP-Botswana Pula
BRL-Brazilian Real
GBP-British Pound
BND-Brunei Dollar
BIF-Burundi Franc
XOF-CFA Franc (BCEAO)
XAF-CFA Franc (BEAC)
KHR-Cambodia Riel
CAD-Canadian Dollar
CVE-Cape Verde Escudo
KYD-Cayman Islands Dollar
CLP-Chilean Peso
CNY-Chinese Yuan
COP-Colombian Peso
KMF-Comoros Franc
CRC-Costa Rica Colon
HRK-Croatian Kuna
CUP-Cuban Peso
CYP-Cyprus Pound
CZK-Czech Koruna
DKK-Danish Krone
DJF-Dijibouti Franc
DOP-Dominican Peso
XCD-East Caribbean Dollar
EGP-Egyptian Pound
SVC-El Salvador Colon
EEK-Estonian Kroon
ETB-Ethiopian Birr
EUR-Euro
FKP-Falkland Islands Pound
GMD-Gambian Dalasi
GHC-Ghanian Cedi
GIP-Gibraltar Pound
XAU-Gold Ounces
GTQ-Guatemala Quetzal
GNF-Guinea Franc
GYD-Guyana Dollar
HTG-Haiti Gourde
HNL-Honduras Lempira
HKD-Hong Kong Dollar
HUF-Hungarian Forint
ISK-Iceland Krona
INR-Indian Rupee
IDR-Indonesian Rupiah
IQD-Iraqi Dinar
ILS-Israeli Shekel
JMD-Jamaican Dollar
JPY-Japanese Yen
JOD-Jordanian Dinar
KZT-Kazakhstan Tenge
KES-Kenyan Shilling
KRW-Korean Won
KWD-Kuwaiti Dinar
LAK-Lao Kip
LVL-Latvian Lat
LBP-Lebanese Pound
LSL-Lesotho Loti
LRD-Liberian Dollar
LYD-Libyan Dinar
LTL-Lithuanian Lita
MOP-Macau Pataca
MKD-Macedonian Denar
MGF-Malagasy Franc
MWK-Malawi Kwacha
MYR-Malaysian Ringgit
MVR-Maldives Rufiyaa
MTL-Maltese Lira
MRO-Mauritania Ougulya
MUR-Mauritius Rupee
MXN-Mexican Peso
MDL-Moldovan Leu
MNT-Mongolian Tugrik
MAD-Moroccan Dirham
MZM-Mozambique Metical
MMK-Myanmar Kyat
NAD-Namibian Dollar
NPR-Nepalese Rupee
ANG-Neth Antilles Guilder
NZD-New Zealand Dollar
NIO-Nicaragua Cordoba
NGN-Nigerian Naira
KPW-North Korean Won
NOK-Norwegian Krone
OMR-Omani Rial
XPF-Pacific Franc
PKR-Pakistani Rupee
XPD-Palladium Ounces
PAB-Panama Balboa
PGK-Papua New Guinea Kina
PYG-Paraguayan Guarani
PEN-Peruvian Nuevo Sol
PHP-Philippine Peso
XPT-Platinum Ounces
PLN-Polish Zloty
QAR-Qatar Rial
ROL-Romanian Leu
RUB-Russian Rouble
WST-Samoa Tala
STD-Sao Tome Dobra
SAR-Saudi Arabian Riyal
SCR-Seychelles Rupee
SLL-Sierra Leone Leone
XAG-Silver Ounces
SGD-Singapore Dollar
SKK-Slovak Koruna
SIT-Slovenian Tolar
SBD-Solomon Islands Dollar
SOS-Somali Shilling
ZAR-South African Rand
LKR-Sri Lanka Rupee
SHP-St Helena Pound
SDD-Sudanese Dinar
SRG-Surinam Guilder
SZL-Swaziland Lilageni
SEK-Swedish Krona
TRY-Turkey Lira
CHF-Swiss Franc
SYP-Syrian Pound
TWD-Taiwan Dollar
TZS-Tanzanian Shilling
THB-Thai Baht
TOP-Tonga Pa'anga
TTD-Trinidad&Tobago Dollar
TND-Tunisian Dinar
TRL-Turkish Lira
USD-U.S. Dollar
AED-UAE Dirham
UGX-Ugandan Shilling
UAH-Ukraine Hryvnia
UYU-Uruguayan New Peso
VUV-Vanuatu Vatu
VEB-Venezuelan Bolivar
VND-Vietnam Dong
YER-Yemen Riyal
YUM-Yugoslav Dinar
ZMK-Zambian Kwacha
ZWD-Zimbabwe Dollar

Omdöme
Tjänsten från WebserviceX.NET verkar väldigt bra. När jag provade SEK till GBP fick jag kursen 7.29 för 100 svenska. Jämnförde med min resaomväxlare och där är kursen just nu 7.25. På x-rates.com är kursen 7.25937. Alla tjänster som jag använt hittills har skiljt sig från andra källor. Varför vet jag inte med marginalerna är ganska små och därför duger det bra till en ungefärlig omräkning.

Nu skulle det vara intressant att sätta ihop det hela med Asp.Net RegionInfo för att automatiskt läsa av vilken kurs som ska hämtas beroende på besökarens inställningar. Men det får bli i en senare artikel.

 

By Jesper Lind