黄色一色のTake Controlウェブサイトは消滅しました!3年間の努力の末、完全なリニューアルを行いました。以前のサイトの大部分をデザインし、コーディングした者として言わせてもらえば、Take Controlが壁にぶち当たって生き残るかどうか試そうとしていた頃、あの色使いにすっかり飽き飽きしていました。
2003 年に Take Control を始めた頃は、サイトは単なる静的な HTML ページの集まりだった。2008 年までに、データベース駆動型のバックエンドが必要だとわかり、Ellis Labs の ExpressionEngine を採用することにした。Engaging.net の開発者 Adam Khan はその後数年間私たちと共に作業し、まずこのサイトをデータベース駆動型に変え、その後 2010 年には Glenn Fleishman と共同で Take Control と TidBITS の両方で使えるアカウント管理システムを開発した (2010 年 4 月 7 日の記事“Take Control 電子ブックを iPad (あるいは iPhone または iPod touch) で読む”参照)。しかし、これはすべてバックエンドの作業であり、2010 年の終わりにはデザイナーの Terry Evans と共同でまずカタログとライブラリのページの外観と雰囲気を刷新し、その後にサイトの残りの部分を進めていった。残念ながら、最初の主要なページが完成した後、テリーさんは他のプロジェクトで忙しくなり、私たちが Neversink の Sam Schick さんと Eli Van Zoeren さんを見つけるのに 2012 年の初めまでかかりました。
では、なぜ3年以上もかかったのでしょうか。最初は、サイトや関連する本の表紙デザインについてサムと何度もやり取りしたり、FUN is OK のジェフ・アレンとロゴの再デザインに取り組んだり、サイトの骨組みに埋め込まれた複雑なビジネスロジックについてイーライから質問に答えたりと、やることがたくさんありました。しかし、予想以上に時間がかかり、自由になる時間はなくなってしまいました。それ以降は、何かを見直す時間ができたときにサムとイーライの準備が整っていなかったり、重大なバグが出て作業が進まなかったりする、といったことが起こりました。そして、彼らがその問題に対処した頃には、私たちは次の本か3冊の本のリリースに没頭していました(Appleのせいです!)。フィードバックサイクルは
数日ではなく、数ヶ月もかかりました。カート・ヴォネガットの言葉を借りれば、そういうことなのです。そして今年初め、イーライと私はようやくうまく息が合い、着実に作業を進めることができるまで、この状態が続きました。
この進歩の鍵となったのはTrelloボードでした。そこでは、バグレポートカードを「未解決」「テスト中」「完了」リスト間で移動させ、カード内で会話を続け、必要に応じてスクリーンショットを添付していました(「Trelloが魅力的なコラボレーションツールを提供」、2012年7月9日)。ボード上の他のリストは、さらなる議論が必要な問題、トレーニングが必要な事項、保留中のアイデアを管理するのに役立ちました。ここ数ヶ月、カスタマーサポートを担当しているLauri ReinhardtがTrelloに深く関わり、eSellerateでの経験を活かしてカートをサイトの新しい外観に合わせ、カートの微妙な動作バグを特定してくれました。
遅れの一因は、新しいサイトへの移行に極度の不安を感じていたことにあります。新しいサイトは ExpressionEngine 2 へのアップグレードを伴い、その結果、基盤となる MySQL データベーステーブルに重大な変更が必要になったからです。さらに恐ろしいことに、TidBITS サイトの様々な部分、特にアカウント情報が同じテーブルに依存していました。これは一方通行であり、断片的に行うことは不可能でした。また、カートを経由するすべての Take Control 注文がこれらのデータベーステーブルに書き込まれるため、ライブデータで即座に処理する必要がありました。
7月上旬には準備が整っていたので、Eliは7月2日にデータベーステーブルの新バージョンをステージングサイトに移植し、7月3日にはTonya、Lauri、そして私が12時間ぶっ続けで移行に伴うバグを捕捉し、Eliが修正できるようにしました。3日の午後8時までには移行準備が整い、Apacheを新しいサイトに設定した後、Apacheが起動しないという1時間のパニック(Apacheの設定ファイルにずっと前から抜けていた閉じ引用符が原因)の後、ようやくオンラインになりました。まるでフランケンシュタイン博士になったような気分でした。「生きている!生きている!」
独立記念日の週末はいつも閑散としているので、移行日を 7 月 3 日としたのはそのためです。ほとんどの作業はうまくいきましたが、バグが次々と見つかりました。新しいサイトのファイル階層のパーミッションが異なっており、特定のファイルの場所が変更されるとは知りませんでした。そして最も驚いたのは、アカウントのパスワードに使われる暗号化が変更されたことです。そのため、TidBITS アカウントコードに大幅な変更を加えるために Glenn に協力を仰ぐ必要がありました。これがなかなか興味深い結果となりました。ExpressionEngine 2 には、アカウントパスワードのセキュリティを高めるための巧妙な機能があります。アップグレード後のユーザーの最初のログイン時に、パスワードに使われるハッシュが SHA-1 から SHA-2 (具体的には
SHA-512) に変更され、それぞれのパスワードに「ソルト」(攻撃を困難にする追加のランダムデータ) が追加されます。これは素晴らしい機能ですが、TidBITS アカウントコードはソルトや SHA512 について知らなかったため、Take Control サイトにログインするだけで、そのユーザーの TidBITS サイトへのログインが不可能になってしまいました。おっと。両サイトは再び同期しました。どちらかのサイトにログインし、アカウントをバックグラウンドで更新するたびに、保存されたパスワードの攻撃耐性がさらに高まり、データ漏洩の影響が軽減されます。セキュリティについて言えば、サイト全体がHTTPSで提供されるようになったため、ログイン情報は常に暗号化されます。
現時点では、ユーザーにとって問題となる既知のバグはすべて対処済みですが、何か問題が解決しない場合はお知らせください。
ということで、リニューアルしました。サイトの構造と機能は以前のものとほぼ同じです。カタログページには最新リリースが表示され、カテゴリー別に絞り込みもできます。ホームページもカタログページを少しアレンジしたものになり、ページ上部のスライドでおすすめの書籍をいくつか紹介します。お持ちの書籍はすべて引き続きライブラリページにまとめられており、そこから様々な形式でダウンロードしたり、Ebook Extraのフルページに移動してタイトルを選択したりできます。
もちろん、各書籍には独自の詳細ページがあり、各書籍の Ebook Extras ページ (書籍所有者向けの特典付き) は書籍の詳細ページに似たものになり、より一貫したユーザー エクスペリエンスが実現されています。
最も大きな変更は、本格的なショッピング カートです。以前は、書籍ページまたはカタログで書籍を選択した後で [購入] ボタンをクリックすると、注文が処理のために eSellerate に送信されていました。サイトに戻ってショッピングを続けるのが非常に困難だったため、ユーザーからよく寄せられる質問は「カート ボタンはどこにあるのですか?」でした。この単純な質問には複雑な解決策が必要でしたが、現在ではサイトでオンサイト ショッピング カートが提供されており、複数の書籍を検索して追加してから [チェックアウト] ボタンを
クリックして注文を eSellerate に送信できます (サイトで [チェックアウト] をクリックすると、eSellerate サイトでクーポンが計算されます)。ホームページとカタログ ページの両方で [購入] ボタンをクリックすると書籍がカートに追加され、ボタンが [カート] ボタンに変わります。任意のカート ボタンまたは右上隅の [カート] アイコンをクリックすると、カートが表示され、チェックアウトできます。
また、すべての書籍ページとカート自体に関連書籍が表示されます。私たちが出版する書籍の幅広さをお客様にご理解いただくことは、私たちの最大の課題の一つです。カートには3冊以上の書籍を追加すると自動的に認識され、30%割引が適用されます(他のクーポンが既に読み込まれている場合を除く)。
コーディングとテストで最も難しかったのは、ログイン時に所有している書籍に基づいてサイトが動的に変化する仕組みでした。例えば、ログインすると、ホームページとカタログから、所有している書籍の「Ebook Extras」ページに簡単にアクセスできます。ここで予期しない結果が表示される場合は、バグが発生しているか、異なるメールアドレスで書籍を購入したために複数のアカウントが作成されている可能性があります。Apple IDとは異なり、アカウントは統合可能です。メインアカウントにログインし、サイト上部の名前をクリックし、「プロフィール」ページで別のメールアドレスを追加できます。残りの作業はシステムが行います(もちろん、メールアドレスの確認は必要です)。
サイトの見た目は全く異なり、Sam Schickが制作してくれた表紙デザインを際立たせるためにデザインされました。Retinaディスプレイに映える美しいグラフィックが特徴です。テキストの量を大幅に減らしました。Tonyaと私はライターなので、以前のサイトでユーザーエクスペリエンスの課題はすべてテキストで説明することで解決しました。例えば、新刊書籍のページでは、無料サンプルのリンクを通常のテキストではなく、書籍画像(iPadのフレームが含まれています。これは、私たちが紙の書籍ではなく電子書籍を販売しているという点を強調するための慣例です)に小さな付箋のように配置しています。
最後に、デザイナーの皆さんがこれに夢中になるのは分かっているので、木目の背景について少し触れておきます。私たちがデザインプロセスを開始したのは、iOS 7 や Apple のスキューモーフィズム戦争が始まる前だったので、iBooks の背景にはまだ木目パネルが使われていました。木製の本棚を参考にするのはまったく適切に思えました。私たちは天然木が大好きだし、家のリフォームはすべて木工職人の友人に地元産の木材を使ってやってもらったからです。しかし、iBooks は安物の松材を使っているように見えたので、もっとましなものにしたかったので、何百枚もの木目のストック写真を見て、今の背景にあるものに落ち着きました。Apple が iBooks の背景をくすんだグレーに変えた後で、これをフラットな背景に替えることはできたでしょうか? もちろんできますが、私たちは木が好きだし、
Apple の流行りとは全く違っていてもその豊かな色が好きなのです。
もちろん、まだ完全には終わっていません。追加したい機能や変更したい点については、すでにTrelloのウィッシュリストにカードを追加していますが、大きな一歩を踏み出した今、少しずつ作業を進め、TidBITSサイトにも少し注意を向けることができるようになりました。このサイトにもデザイン面での調整が必要です。